/* ==========================================================================
   kgrid_vhio.css
   Estilos para adaptar el plugin kgrid de KumbiaPHP al template Vhio (BS5).
   Agregar el contenido de este archivo a: public/css/backend/styleVHIO.css
   ========================================================================== */

/* ── Toolbar del kgrid ───────────────────────────────────────────── */
.btn-toolbar-top {
    display: inline-flex !important;
    align-items: center;
}

/* ── Form de búsqueda: oculto por CSS al cargar ──────────────────── */
.form-search-container,
hr.divider {
    display: none !important;
}
.form-search-container[style*="display: block"],
.form-search-container[style*="display:block"] {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 4px 0;
    clear: both;
    margin-top: 8px;
    border-top: 1px solid #e9ecef;
}
#kgrid-search-anchor {
    display: block !important;
    width: 100% !important;
    clear: both;
}

/* ── Inputs y select dentro del form ────────────────────────────── */
.form-search-container .form-search .row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-left: 45px;
}
.form-search-container .col-xs-12 {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
}
.form-search-container select.form-control,
.form-search-container input.form-control {
    display: inline-block !important;
    width: auto !important;
    min-width: 160px;
    height: 36px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
}
.form-search-container button[type="submit"] {
    height: 36px;
    padding: 4px 14px;
}

/* ── Dropdown de ordenamiento en th ─────────────────────────────── */
th .btn-group {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    white-space: nowrap;
}
th .btn-group > a {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 2px;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
}
th .btn-group > a:hover { color: #7366ff !important; }
th .btn-group .dropdown-menu {
    font-size: 13px;
    min-width: 140px;
}
.table-sm th { white-space: nowrap !important; }

/* ── Selector de columnas: contenedor con posición relativa ──────── */
/* Scope limitado a .shell-view para no afectar otros card-header */
.shell-view .card-header {
    position: relative;
}
#col-selector-anchor {
    position: absolute;
    top: 12px;
    right: 16px;
}