/* =========================================
   ESTILOS UNIFICADOS PARA TODAS LAS TABLAS ADMIN
   ========================================= */

/* 1) Evitar scroll interno en wrappers */
#rolesTableWrapper,
#permsTableWrapper,
#usersTableWrapper,
#participantsTableWrapper,
#companiesTableWrapper {
    max-width: none !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
}

/* 2) Layout tabular estable para TODAS las tablas */
#rolesTable,
#permsTable,
#usersTable,
#participantsTable,
#companiesTable {
    table-layout: fixed !important;
    width: 100% !important;
    display: table !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
}

/* 3) Forzar thead / td como celdas en TODAS las tablas */
#rolesTable thead th,
#rolesTable tbody td,
#permsTable thead th,
#permsTable tbody td,
#usersTable thead th,
#usersTable tbody td,
#participantsTable thead th,
#participantsTable tbody td,
#companiesTable thead th,
#companiesTable tbody td {
    display: table-cell !important;
    vertical-align: middle !important;
    position: static !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
}

/* =========================================
   ANCHOS DE COLUMNAS POR TABLA
   ========================================= */

/* ROLES Y PERMISOS */
#rolesTable col.col-actions-col,
#permsTable col.col-actions-col {
    width: 220px !important;
}

#rolesTable col.col-name-col,
#permsTable col.col-name-col {
    width: auto !important;
}

/* USUARIOS */
#usersTable colgroup {
    display: table-column-group;
}

#usersTable col.col-name-col {
    width: 20% !important;
}

#usersTable col.col-email-col {
    width: 25% !important;
}

#usersTable col.col-role-col {
    width: 15% !important;
}

#usersTable col.col-created-col {
    width: 15% !important;
}

#usersTable col.col-actions-col {
    width: 220px !important;
}

/* PARTICIPANTES */
#participantsTable colgroup {
    display: table-column-group;
}

#participantsTable col.col-name-col {
    width: 25% !important;
}

#participantsTable col.col-age-col {
    width: 12% !important;
}

#participantsTable col.col-date-col {
    width: 15% !important;
}

#participantsTable col.col-company-col {
    width: 23% !important;
}

#participantsTable col.col-actions-col {
    width: 220px !important;
}

/* EMPRESAS */
#companiesTable colgroup {
    display: table-column-group;
}

#companiesTable col.col-name-col {
    width: 25% !important;
}

#companiesTable col.col-nit-col {
    width: 15% !important;
}

#companiesTable col.col-city-col {
    width: 15% !important;
}

#companiesTable col.col-contact-col {
    width: 20% !important;
}

#companiesTable col.col-actions-col {
    width: 220px !important;
}

/* =========================================
   HEADERS DE ACCIONES - ALINEACIÓN DERECHA
   ========================================= */
#rolesTable thead th.col-actions,
#permsTable thead th.col-actions,
#usersTable thead th.col-actions,
#participantsTable thead th.col-actions,
#companiesTable thead th.col-actions {
    text-align: right !important;
    padding-right: 24px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* =========================================
   CELDAS DE ACCIONES - ALINEACIÓN DERECHA
   ========================================= */
#rolesTable tbody td.actions-cell,
#permsTable tbody td.actions-cell,
#usersTable tbody td.actions-cell,
#participantsTable tbody td.actions-cell,
#companiesTable tbody td.actions-cell {
    text-align: right !important;
    padding-right: 24px !important;
    vertical-align: middle !important;
}

/* Contenedor interno de botones - forzar alineación */
#usersTable tbody td.actions-cell,
#participantsTable tbody td.actions-cell,
#companiesTable tbody td.actions-cell {
    display: table-cell !important;
}

/* Si hay divs o contenedores dentro de actions-cell */
.actions-cell>div,
.actions-cell>* {
    display: inline-flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

/* =========================================
   ESTILOS DE BOTONES - TAMAÑO AUMENTADO
   ========================================= */
.rbt-dashboard-table table .rbt-btn.small {
    padding: .65rem 1.05rem !important;
    font-size: 1.50rem !important;
    line-height: 1.6 !important;
    min-height: 55px !important;
    height: auto !important;
    min-width: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .375rem !important;
    white-space: nowrap !important;
}

/* Mantener que el contenido interno no se comprima */
.rbt-dashboard-table table .rbt-btn.small>* {
    display: inline-block;
    vertical-align: middle;
}

/* Iconos dentro del botón */
.rbt-dashboard-table table .rbt-btn.small i,
.rbt-dashboard-table table .rbt-btn.small svg {
    vertical-align: middle;
    margin-right: .375rem;
}

/* Botones específicos con colores fijos */
.rbt-btn.action-edit.small {
    background: linear-gradient(90deg, #fff4c4, #ffe28a) !important;
    color: #1a1a1a !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.rbt-btn.action-delete.small {
    background: linear-gradient(90deg, #ff6b6b, #ff3b30) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Hover effects */
.rbt-btn.action-edit.small:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 226, 138, 0.3) !important;
}

.rbt-btn.action-delete.small:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3) !important;
}

/* =========================================
   RESPONSIVE - ADAPTACIÓN MÓVIL
   ========================================= */
@media (max-width: 576px) {

    #rolesTable,
    #permsTable,
    #usersTable,
    #participantsTable,
    #companiesTable {
        table-layout: auto !important;
    }

    #rolesTable thead th.col-actions,
    #permsTable thead th.col-actions,
    #usersTable thead th.col-actions,
    #participantsTable thead th.col-actions,
    #companiesTable thead th.col-actions {
        text-align: left !important;
        padding-right: 16px !important;
    }

    #rolesTable tbody td.actions-cell,
    #permsTable tbody td.actions-cell,
    #usersTable tbody td.actions-cell,
    #participantsTable tbody td.actions-cell,
    #companiesTable tbody td.actions-cell {
        display: block !important;
        text-align: left !important;
        padding-top: 8px !important;
    }

    /* Botones algo más compactos en móvil */
    .rbt-dashboard-table table .rbt-btn.small {
        padding: .5rem .85rem !important;
        font-size: 1rem !important;
        min-height: 40px !important;
        min-width: 68px !important;
    }
}

/* =========================================
   SAFETY - NEUTRALIZAR OVERFLOW
   ========================================= */
.rbt-dashboard-table.table-responsive {
    overflow: visible !important;
}

/* ============================================
   FIX: Labels en modales - estilo minimalista
   ============================================ */

/* Estructura base del form-group en modales */
.modal .form-group {
    position: relative !important;
    margin-bottom: 1.5rem !important;
}

/* Label minimalista (texto arriba, pequeño) */
.modal .form-group label {
    display: block !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
}

/* Input con estilo limpio */
.modal .form-group input,
.modal .form-group select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Placeholder visible */
.modal .form-group input::placeholder {
    color: #a0aec0 !important;
    opacity: 1 !important;
}

/* Focus state */
.modal .form-group input:focus,
.modal .form-group select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Ocultar focus-border decorativo si existe */
.modal .form-group .focus-border {
    display: none !important;
}



/* Input con error */
.modal .form-group input.is-invalid,
.modal .form-group select.is-invalid {
    border-color:#e53e3e !important;
}

/* Asegurar que los labels tengan el texto */
.modal .form-group label:empty::before {
    content: attr(for) !important;
    text-transform: capitalize !important;
}

/* =========================================
   LOGO STYLES (MANTENER TUS ESTILOS EXISTENTES)
   ========================================= */
.rbt-header .logo a img,
.popup-mobile-menu .inner-wrapper .inner-top .logo a img,
.footer-style-1 .logo a img,
.logo img,
.logo .logo-dark img,
.logo .logo-light img,
.site-logo-img {
    max-height: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    vertical-align: middle !important;
}

.rbt-header-wrapper,
.rbt-header-wrapper .mainbar-row,
.header-left,
.rbt-header .header-info {
    min-height: 84px !important;
    align-items: center !important;
    overflow: visible !important;
}

@media (max-width: 575px) {

    .rbt-header .logo a img,
    .site-logo-img {
        max-height: 60px !important;
    }

    .rbt-header-wrapper,
    .rbt-header-wrapper .mainbar-row {
        min-height: 60px !important;
    }
}

.rbt-header .logo a img[style],
.rbt-header .logo a img {
    max-height: 110px !important;
    width: auto !important;
}

.rbt-header-wrapper [style="opacity"] {
    opacity: unset !important;
}

/* =========================================
   LAYOUT FIXES - HEADER/FOOTER/CONTENT
   ========================================= */
.rbt-header {
    z-index: 200 !important;
}

.rbt-header .rbt-header-wrapper.rbt-sticky {
    z-index: 200 !important;
}

.rbt-footer {
    position: relative !important;
    z-index: 190 !important;
}

.rbt-lesson-content-wrapper {
    min-height: auto !important;
}