/* ============================================================
   TABLAS COMPACTAS Y MENÚS VISIBLES - GLOBAL PANEL
   ============================================================ */

/* Permitir que los dropdowns salgan de los formularios/tarjetas */
body.panel-page .panel-card,
body.panel-page .form-stack,
body.panel-page .form-grid,
body.panel-page .field-stack,
body.panel-page .page-hero,
body.panel-page .panel-container,
body.panel-page main,
body.panel-page section{
    overflow: visible !important;
}

/* Select buscable siempre por encima */
body.panel-page .ss-select{
    position: relative !important;
    z-index: 5000 !important;
}

body.panel-page .ss-select.is-open{
    z-index: 2147483000 !important;
}

body.panel-page .ss-dropdown{
    z-index: 2147483001 !important;
    max-height: 280px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.55) !important;
}

body.panel-page .ss-list{
    max-height: 205px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Contenedores de tablas */
body.panel-page .table-shell,
body.panel-page .table-container,
body.panel-page .services-table-wrap,
body.panel-page .services-table-container{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 420px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #334155 #0b1220 !important;
}

/* Tablas */
body.panel-page .data-table,
body.panel-page table.data-table,
body.panel-page .services-table,
body.panel-page table.services-table,
body.panel-page .table-container table{
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Tablas muy anchas */
body.panel-page.services-page .services-table,
body.panel-page.equipos-conectados-page .data-table{
    min-width: 1750px !important;
}

body.panel-page.facturas-page .data-table,
body.panel-page.tickets-page .data-table,
body.panel-page.dispositivos-page .data-table{
    min-width: 1250px !important;
}

/* Encabezados fijos */
body.panel-page .data-table thead th,
body.panel-page .services-table thead th,
body.panel-page .table-container table thead th{
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(148,163,184,.22) !important;
}

/* Celdas compactas */
body.panel-page .data-table th,
body.panel-page .data-table td,
body.panel-page .services-table th,
body.panel-page .services-table td,
body.panel-page .table-container table th,
body.panel-page .table-container table td{
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.25 !important;
    height: auto !important;
}

/* Filas compactas */
body.panel-page .data-table tr,
body.panel-page .services-table tr{
    height: auto !important;
    min-height: 0 !important;
}

/* Columnas de nombres pueden partir línea */
body.panel-page .data-table th:nth-child(2),
body.panel-page .data-table td:nth-child(2),
body.panel-page .services-table th:nth-child(2),
body.panel-page .services-table td:nth-child(2){
    min-width: 210px !important;
    max-width: 300px !important;
    white-space: normal !important;
}

/* Acciones compactas */
body.panel-page .acciones-tabla,
body.panel-page .table-actions,
body.panel-page .actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
}

body.panel-page .data-table button,
body.panel-page .services-table button,
body.panel-page .table-container table button{
    min-width: auto !important;
    white-space: nowrap !important;
    padding: 9px 12px !important;
}

/* Scrollbar visible */
body.panel-page .table-shell::-webkit-scrollbar,
body.panel-page .table-container::-webkit-scrollbar,
body.panel-page .services-table-wrap::-webkit-scrollbar,
body.panel-page .services-table-container::-webkit-scrollbar,
body.panel-page .ss-list::-webkit-scrollbar{
    height: 13px !important;
    width: 13px !important;
}

body.panel-page .table-shell::-webkit-scrollbar-track,
body.panel-page .table-container::-webkit-scrollbar-track,
body.panel-page .services-table-wrap::-webkit-scrollbar-track,
body.panel-page .services-table-container::-webkit-scrollbar-track,
body.panel-page .ss-list::-webkit-scrollbar-track{
    background: #0b1220 !important;
    border-radius: 999px !important;
}

body.panel-page .table-shell::-webkit-scrollbar-thumb,
body.panel-page .table-container::-webkit-scrollbar-thumb,
body.panel-page .services-table-wrap::-webkit-scrollbar-thumb,
body.panel-page .services-table-container::-webkit-scrollbar-thumb,
body.panel-page .ss-list::-webkit-scrollbar-thumb{
    background: #334155 !important;
    border-radius: 999px !important;
    border: 3px solid #0b1220 !important;
}

/* Tema claro */
body.panel-page:not(.theme-dark) .data-table thead th,
body.panel-page:not(.theme-dark) .services-table thead th,
body.panel-page:not(.theme-dark) .table-container table thead th{
    background: #eaf2ff !important;
    color: #0f172a !important;
}

body.panel-page:not(.theme-dark) .table-shell::-webkit-scrollbar-track,
body.panel-page:not(.theme-dark) .table-container::-webkit-scrollbar-track,
body.panel-page:not(.theme-dark) .services-table-wrap::-webkit-scrollbar-track,
body.panel-page:not(.theme-dark) .services-table-container::-webkit-scrollbar-track{
    background: #e5e7eb !important;
}

body.panel-page:not(.theme-dark) .table-shell::-webkit-scrollbar-thumb,
body.panel-page:not(.theme-dark) .table-container::-webkit-scrollbar-thumb,
body.panel-page:not(.theme-dark) .services-table-wrap::-webkit-scrollbar-thumb,
body.panel-page:not(.theme-dark) .services-table-container::-webkit-scrollbar-thumb{
    background: #94a3b8 !important;
    border-color: #e5e7eb !important;
}

@media (max-width: 900px){
    body.panel-page .table-shell,
    body.panel-page .table-container,
    body.panel-page .services-table-wrap,
    body.panel-page .services-table-container{
        max-height: 360px !important;
    }
}