/**
 * Tablas estandarizadas — paleta Avante
 * Aplica a tablas dentro del contenido principal de la aplicacion.
 */

:root {
    --table-frame-border: #e7eef5;
    --table-shell-border: #e7eef5;
    --table-shell-border-strong: #c5dae8;
    --table-shell-radius: 10px;
    --table-shell-bg: #ffffff;
    --table-shell-shadow: none;
    --table-head-bg: #f6fafd;
    --table-head-color: var(--brand-dark, #446078);
    --table-head-border: #c8dce8;
    --table-row-border: #e6eef4;
    --table-row-hover: rgba(7, 123, 161, 0.07);
    --table-row-stripe: rgba(7, 123, 161, 0.025);
    --table-cell-padding-y: 0.62rem;
    --table-cell-padding-x: 0.8rem;
    --table-scroll-max-height: min(72vh, calc(100dvh - 300px));
}

/* Contenedor estandar de tablas en toda la app */
.app-table-wrap,
.almacen-table-wrap,
.import-table-wrap,
.app-content-inner .table-shell,
.app-content-inner .table-wrap,
.app-content-inner .table-margin-wrap,
.app-content-inner .inventory-table-scroll,
.app-content-inner .crud-table-wrap,
.app-content-inner .table-scroll-y,
.app-content-inner .table-responsive:not(.table-responsive-flush):not(.no-table-shell),
.app-content-inner .dataTables_wrapper {
    border: 1px solid var(--table-frame-border);
    border-radius: var(--table-shell-radius);
    background: var(--table-shell-bg);
    box-shadow: var(--table-shell-shadow);
    overflow: auto;
    scrollbar-gutter: auto;
}

.app-table-wrap > table,
.almacen-table-wrap > table,
.import-table-wrap > table {
    margin-bottom: 0;
}

/* Scroll vertical en tablas con muchos registros */
.app-content-inner .table-scroll-y,
.app-content-inner .inventory-table-scroll,
.app-content-inner .crud-table-wrap,
.app-content-inner .inventory-table-card > .card-body > .table-responsive,
.app-content-inner .inventory-table-card > .card-body > .inventory-table-scroll,
.app-content-inner .inventory-table-card > .card-body > .table-scroll-y {
    display: block;
    width: 100%;
    height: fit-content;
    max-height: var(--table-scroll-max-height);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 123, 161, 0.45) rgba(217, 230, 239, 0.55);
}

.app-content-inner .table-scroll-y::-webkit-scrollbar,
.app-content-inner .inventory-table-scroll::-webkit-scrollbar,
.app-content-inner .crud-table-wrap::-webkit-scrollbar,
.app-content-inner .inventory-table-card > .card-body > .table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.app-content-inner .table-scroll-y::-webkit-scrollbar-thumb,
.app-content-inner .inventory-table-scroll::-webkit-scrollbar-thumb,
.app-content-inner .crud-table-wrap::-webkit-scrollbar-thumb,
.app-content-inner .inventory-table-card > .card-body > .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(7, 123, 161, 0.42);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.app-content-inner .table-scroll-y::-webkit-scrollbar-track,
.app-content-inner .inventory-table-scroll::-webkit-scrollbar-track,
.app-content-inner .crud-table-wrap::-webkit-scrollbar-track,
.app-content-inner .inventory-table-card > .card-body > .table-responsive::-webkit-scrollbar-track {
    background: rgba(217, 230, 239, 0.45);
    border-radius: 999px;
}

.app-content-inner .table-margin-wrap,
.app-content-inner .card-body.p-0 > .table-margin-wrap,
.app-content-inner .card-body.p-0 > .table-responsive:not(.inventory-table-scroll):not(.table-scroll-y),
.app-content-inner .card-body.p-0 > .inventory-table-scroll {
    padding: 0.75rem;
}

.app-content-inner .card-body.p-0 > .inventory-table-scroll:not(.inventory-table-shell),
.app-content-inner .card-body.p-0 > .table-scroll-y:not(.inventory-table-shell) {
    padding: 0;
}

.app-content-inner .inventory-table-card > .card-body > .inventory-table-shell {
    margin: 0.75rem;
    padding: 0;
}

.app-content-inner .card-body.p-0 > .inventory-table-scroll > .table,
.app-content-inner .card-body.p-0 > .table-scroll-y > .table {
    margin-bottom: 0;
}

.app-content-inner .dataTables_wrapper {
    padding: 0.75rem;
    max-height: var(--table-scroll-max-height);
    overflow: auto;
}

.app-content-inner .dataTables_wrapper .table-responsive,
.app-content-inner .dataTables_wrapper .table-margin-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

/* Evitar doble borde cuando hay contenedor + table-responsive anidados */
.app-content-inner .table-margin-wrap > .table-responsive,
.app-content-inner .table-margin-wrap > .inventory-table-scroll,
.app-content-inner .table-margin-wrap > .table-scroll-y,
.app-content-inner .inventory-table-scroll > .table-responsive,
.app-content-inner .table-scroll-y > .table-responsive,
.app-content-inner .app-table-wrap > .table-responsive,
.app-content-inner .table-wrap > .table-responsive {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    max-height: none;
    overflow: visible;
}

/* Tabla base */
.app-content-inner table.table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-main, #446078);
    background: transparent;
}

.app-content-inner table.table > :not(caption) > * > * {
    border-color: var(--table-row-border);
}

/* Encabezado */
.app-content-inner table.table thead th,
.app-content-inner table.table thead td {
    background: var(--table-head-bg);
    color: var(--table-head-color);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 2px solid var(--table-head-border);
    border-top: none;
    white-space: nowrap;
}

.app-content-inner table.table thead th:first-child {
    border-top-left-radius: 0;
}

.app-content-inner table.table thead th:last-child {
    border-top-right-radius: 0;
}

/* Cuerpo */
.app-content-inner table.table tbody td,
.app-content-inner table.table tbody th {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    vertical-align: middle;
    border-bottom: 1px solid var(--table-row-border);
    background: transparent;
}

.app-content-inner table.table tbody tr:last-child > td,
.app-content-inner table.table tbody tr:last-child > th {
    border-bottom: none;
}

.app-content-inner table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-row-stripe);
}

.app-content-inner table.table.table-hover > tbody > tr:hover > *,
.app-content-inner table.table tbody tr:hover > td,
.app-content-inner table.table tbody tr:hover > th {
    background-color: var(--table-row-hover) !important;
}

/* Bordes suaves en variantes bootstrap */
.app-content-inner table.table-bordered {
    border: 1px solid var(--table-shell-border);
    border-radius: var(--table-shell-radius);
    overflow: hidden;
}

.app-content-inner table.table-bordered > :not(caption) > * > * {
    border-color: var(--table-row-border);
}

.app-content-inner table.table-sm thead th,
.app-content-inner table.table-sm tbody td {
    padding: 0.45rem 0.6rem;
    font-size: 0.86rem;
}

/* Sticky header dentro del area con scroll */
.app-content-inner .table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--table-head-bg);
    box-shadow: inset 0 1px 0 var(--table-head-border), 0 1px 0 var(--table-head-border);
}

.app-content-inner .inventory-table-card .inventory-table-card-body .inventory-table-scroll,
.app-content-inner .inventory-table-card .inventory-table-card-body .app-table-wrap {
    height: fit-content;
    max-height: var(--table-scroll-max-height);
}

/* Tarjetas de listado legacy (patron p-0 + shell) */
.app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) > .card-body > .inventory-table-shell {
    margin: 0.75rem;
}

.app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) .inventory-list-pagination {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.65rem !important;
}

.app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) > .card-body > .p-3 {
    padding: 0.65rem 0.75rem 0.75rem !important;
}

.app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) .inventory-table thead th,
.app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) .inventory-table tbody td {
    padding: 0.5rem 0.75rem;
}

.app-content-inner .inventory-table-card .inventory-table td,
.app-content-inner .inventory-table-card .inventory-table th {
    vertical-align: middle;
}

/* Inventario: sin borde doble en scroll interno */
.app-content-inner .inventory-table-card .inventory-table-card-body .inventory-table-scroll,
.app-content-inner .inventory-table-card .inventory-table-card-body .app-table-wrap {
    border: 1px solid var(--table-frame-border);
    border-radius: var(--table-shell-radius);
    background: var(--table-shell-bg);
}

/* Tarjetas con tabla a pelo (sin shell intermedio) */
.app-content-inner .card > .table,
.app-content-inner .card .card-body:not(.p-0) > .table {
    border: 1px solid var(--table-frame-border);
    border-radius: var(--table-shell-radius);
    overflow: hidden;
    box-shadow: none;
}

/* Dashboard panels — mismo marco que import-card + app-table-wrap */
.dashboard-home .dash-panel .card-body {
    padding: 1rem 1.1rem;
}

.dashboard-home .dash-panel .card-body > .app-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    height: fit-content;
    scrollbar-gutter: auto;
}

.app-content-inner .dash-panel .table-shell,
.app-content-inner .dash-panel .table-margin-wrap,
.app-content-inner .dash-panel .table-responsive {
    border-color: var(--table-shell-border);
}

/* Estado vacio */
.app-content-inner .items-empty-cell {
    padding: 2rem 1rem !important;
    border-bottom: none !important;
}

.app-content-inner .items-empty-state {
    color: var(--text-muted, #7e8080);
}

/* DataTables controles */
.app-content-inner .dataTables_wrapper .dataTables_length,
.app-content-inner .dataTables_wrapper .dataTables_filter,
.app-content-inner .dataTables_wrapper .dataTables_info,
.app-content-inner .dataTables_wrapper .dataTables_paginate {
    color: var(--text-muted, #7e8080);
    padding: 0.25rem 0.15rem;
}

.app-content-inner .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand, #077ba1) !important;
    border-color: var(--brand, #077ba1) !important;
    color: #fff !important;
    border-radius: 8px;
}

.app-content-inner .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(7, 123, 161, 0.12) !important;
    border-color: var(--table-shell-border) !important;
    color: var(--brand-dark, #446078) !important;
    border-radius: 8px;
}

/* CRUD card interior */
.app-content-inner .crud-card .crud-table-wrap {
    border: 1px solid var(--table-frame-border);
    border-radius: var(--table-shell-radius);
    box-shadow: none;
}

/* Paginacion laravel dentro de cards */
.app-content-inner .card .pagination {
    margin-bottom: 0;
}

.app-content-inner .card .pagination .page-link {
    border-color: var(--table-shell-border);
    color: var(--brand-dark, #446078);
    border-radius: 8px;
    margin: 0 2px;
}

.app-content-inner .card .pagination .page-item.active .page-link {
    background-color: var(--brand, #077ba1);
    border-color: var(--brand, #077ba1);
}

/* Modo oscuro */
html[data-theme='dark'] {
    --table-frame-border: var(--theme-border, #2a3d4d);
    --table-shell-border: var(--theme-border, #2a3d4d);
    --table-shell-border-strong: #355066;
    --table-shell-bg: var(--theme-surface, #14212c);
    --table-shell-shadow: none;
    --table-head-bg: var(--theme-surface-elevated, #1a2d3d);
    --table-head-color: #b8d4e4;
    --table-head-border: #355066;
    --table-row-border: #2a3d4d;
    --table-row-hover: rgba(57, 166, 201, 0.14);
    --table-row-stripe: rgba(57, 166, 201, 0.06);
}

html[data-theme='dark'] .app-content-inner table.table {
    color: var(--theme-text, #d7e6f0);
}

html[data-theme='dark'] .app-content-inner table.table thead th,
html[data-theme='dark'] .app-content-inner table.table thead td {
    color: var(--table-head-color);
}

html[data-theme='dark'] .app-content-inner .dataTables_wrapper .dataTables_filter input,
html[data-theme='dark'] .app-content-inner .dataTables_wrapper .dataTables_length select {
    background: var(--theme-input-bg, #1a2d3d);
    color: var(--theme-input-text, #d7e6f0);
    border-color: var(--theme-border, #2a3d4d);
    border-radius: 8px;
}

@media (max-width: 767.98px) {
    :root {
        --table-scroll-max-height: min(62vh, calc(100dvh - 260px));
    }

    .app-content-inner table.table thead th,
    .app-content-inner table.table tbody td {
        padding: 0.5rem 0.55rem;
        font-size: 0.84rem;
    }

    .app-content-inner .table-margin-wrap,
    .app-content-inner .card-body.p-0 > .table-margin-wrap,
    .app-content-inner .card-body.p-0 > .table-responsive,
    .app-content-inner .card-body.p-0 > .inventory-table-scroll {
        padding: 0.5rem;
    }

    .app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) > .card-body > .inventory-table-shell {
        margin: 0.65rem;
    }

    .app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) .inventory-table thead th,
    .app-content-inner .inventory-table-card:not(:has(.inventory-table-card-body)) .inventory-table tbody td {
        padding: 0.58rem 0.65rem;
    }

    .app-content-inner .inventory-table-card .inventory-table-card-body {
        padding: 0.75rem;
    }
}