@import (reference) "../../../../assets/css/color.less";
@import (reference) "../../../../assets/css/font.less";
@import (reference) "../../../../assets/css/variables.less";
@import (reference) "../../../../assets/css/index.less";

// Estilos para Configuración > Sistemas (orden + activar/desactivar)
#contentConfigAdmin {
    .moduleCrudWindow {
        z-index: 20;
    }

    .systemsHint {
        margin: 4px 0 8px;
        font-size: 12px;
        color: var(--color-text-soft, #6b7280);
    }

    .tableSystems {
        width: 100%;
        border-collapse: collapse;
        background: var(--color-white, #fff);
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: 8px;
        overflow: hidden;

        /* thead th {
            text-align: left;
            font-weight: 600;
            font-size: 13px;
            color: var(--color-text, #111827);
            background: var(--color-gray-50, #f9fafb);
            border-bottom: 1px solid var(--color-line, #e5e7eb);
            padding: 8px 8px;
            white-space: nowrap;
        }

        tbody td {
            padding: 4px 8px;
            border-bottom: 1px solid var(--color-line, #e5e7eb);
            vertical-align: middle;
            font-size: 14px;
            color: var(--color-text, #111827);
        }

        tbody tr:last-child td {
            border-bottom: none;
        } */

        .colHandle {
            width: 42px;
            text-align: center;
        }

        .handle {
            cursor: grab;
            color: var(--color-text-soft, #6b7280);
        }

        .systemName {
            display: flex;
            align-items: center;
            gap: 8px;

            >i {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 8px;
                color: #fff;
                flex: 0 0 auto;
            }

            >span {
                font-weight: 600;
            }
        }

        .colType {
            color: var(--color-text-soft, #6b7280);
            font-size: 13px;
        }

        .colModules {
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .modulesSortable {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .moduleItem {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 4px;
            border: 1px solid var(--color-line, #e5e7eb);
            border-radius: 8px;
            background: var(--color-white, #fff);
        }

        .moduleItem .moduleName {
            font-size: 13px;
            color: var(--color-text, #111827);
            flex: 1 1 auto;
        }

        .moduleItem .btnModuleToggleState {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-line, #e5e7eb);
            border-radius: 8px;
            background: var(--color-white, #fff);
            flex: 0 0 auto;
        }

        .moduleItem .btnModuleToggleState:hover {
            background: var(--color-gray-50, #f9fafb);
        }

        .btnSystemToggleState {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;

        }

        .btnSystemToggleState:hover {
            background: var(--color-gray-50, #f9fafb);
        }
    }

    .modulesCell {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .modulesCellHeader {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-soft, #6b7280);
        font-size: 12px;
    }

    .modulesCellHeader .btnToggleModulesList {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: 8px;
        background: var(--color-white, #fff);
    }

    .modulesCellHeader .btnToggleModulesList:hover {
        background: var(--color-gray-50, #f9fafb);
    }

    .modulesCellHeader .modulesCount {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        border: 1px solid var(--color-line, #e5e7eb);
        background: var(--color-gray-50, #f9fafb);
    }

    tr.systemRow.modules-collapsed .modulesSortable {
        display: none;
    }

    // Search bar for systems access
    .rolesAccessSearch {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .icon {
            position: absolute;
            left: 10px;
            font-size: 13px;
            color: var(--color-text-soft, #6b7280);
            pointer-events: none;
        }

        .formInput {
            padding-left: 30px;
            font-size: 13px;
            height: 32px;
        }
    }

    // Roles: Accesos a sistemas y módulos (compacto + robusto)
    .rolesAccessRoot {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rolesAccessSys {
        padding: 8px 8px 8px;
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 6px;
    }

    .rolesAccessSysRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 15px;
    }

    .rolesAccessSysInfo {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .btnCollapseSys {
        flex: 0 0 auto;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 4px;
        color: var(--color-text-soft, #6b7280);
        transition: all 0.2s ease;
        line-height: 1;

        &:hover {
            background: var(--color-bg-gray, #f3f4f6);
            color: var(--color-text, #111827);
        }

        i {
            font-size: 14px;
            transition: transform 0.2s ease;
        }
    }

    .rolesAccessMods {
        margin-top: 8px;
        padding-top: 8px;
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    .rolesAccessMod {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 8px;
        border-radius: 6px;

        // Fondo alternado tipo tabla (striped)
        &.is-striped {
            background: var(--color-gray-50, #f9fafb);
        }

        &:hover {
            background: var(--color-bg-gray, #f3f4f6);
        }
    }

    .rolesAccessModRow {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .rolesAccessActions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .rolesPermits {
        display: flex;
        align-items: center;
        gap: 4px;
        padding-left: 0;

        // Quitar separador entre iconos
        a {
            border-right: none !important;
        }
    }

    .btnPermitToggle {
        font-size: 16px;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;

        &:hover {
            background: var(--color-bg-gray, #f3f4f6);
        }

        &.is-active {
            color: var(--color-primary, #3b82f6);
            background: rgba(59, 130, 246, 0.1);
        }
    }

    // Placeholders de jQuery UI Sortable
    #systemsSortable .ui-sortable-placeholder {
        visibility: visible !important;
        background: rgba(59, 130, 246, 0.08);
        border: 1px dashed rgba(59, 130, 246, 0.35);
    }

    #systemsSortable .ui-sortable-placeholder td {
        height: 54px;
    }

    .modulesSortable .ui-sortable-placeholder {
        visibility: visible !important;
        background: rgba(59, 130, 246, 0.08);
        border: 1px dashed rgba(59, 130, 246, 0.35);
        border-radius: 8px;
        height: 34px;
    }

    // Modules CRUD (edit view)
    .modulesCrudSection {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .modulesCrudHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;

        .title {
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .modulesCrudCount {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            border: 1px solid var(--color-line, #e5e7eb);
            background: var(--color-gray-50, #f9fafb);
            font-size: 11px;
            font-weight: 500;
            color: var(--color-text-soft, #6b7280);
        }
    }

    .modulesCrudList {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modulesCrudGroup {
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: 8px;
        background: var(--color-white, #fff);
        overflow: hidden;
    }

    .modulesCrudGroupHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--color-line, #e5e7eb);
        background: var(--color-gray-50, #f9fafb);
    }

    .modulesCrudGroupCount {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        border: 1px solid var(--color-line, #e5e7eb);
        background: var(--color-white, #fff);
        font-size: 11px;
        color: var(--color-text-soft, #6b7280);
    }

    .modulesCrudGroupList {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        min-height: 42px;
    }

    .modulesCrudEmpty {
        padding: 8px 10px;
        border: 1px dashed var(--color-line, #e5e7eb);
        border-radius: 8px;
        color: var(--color-text-soft, #6b7280);
        font-size: 12px;
        background: var(--color-gray-50, #f9fafb);
    }

    .moduleGroupPill {
        display: inline-flex;
        align-items: center;
        max-width: 180px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(59, 130, 246, 0.22);
        background: rgba(59, 130, 246, 0.08);
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .moduleCrudCard {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: 8px;
        background: var(--color-white, #fff);

        .moduleCrudDrag {
            .handle {
                cursor: grab;
                color: var(--color-text-soft, #6b7280);
            }
        }

        .moduleCrudIcon {
            flex: 0 0 auto;

            i {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 8px;
                color: #fff;
                font-size: 14px;
            }
        }

        .moduleCrudInfo {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;

            .moduleCrudName {
                font-weight: 600;
                font-size: 14px;
                color: var(--color-text, #111827);
            }

            .moduleCrudPath {
                font-size: 12px;
                color: var(--color-text-soft, #6b7280);
            }
        }

        .moduleCrudMeta {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .moduleCrudActions {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 4px;

            .btnIcon {
                width: 28px;
                height: 28px;
                display: inline-flex;
                align-items: center;
                border:0px;
                justify-content: center;
                color: var(--color-btn-sidebar-config);
                border-radius: 8px;
 

                &:hover {
                    background: var(--color-gray-50, #f9fafb);
                }
            }
        }
    }

    .modulesCrudGroupList .ui-sortable-placeholder {
        visibility: visible !important;
        background: rgba(59, 130, 246, 0.08);
        border: 1px dashed rgba(59, 130, 246, 0.35);
        border-radius: 8px;
        height: 48px;
    }

    .moduleCategorysSimple {
        margin-top: 18px;
        background: transparent;

        .categorysMacroTable {
            max-width: none;
            min-height: auto;
            height: auto;
            overflow: visible;

            &.isCompact {
                .macroTableHeader {
                    padding: 8px 0 12px;
                    align-items: center;

                    .left {
                        gap: 10px;
                        flex-wrap: wrap;

                        .categoryInputRow {
                            min-width: 320px;

                            .inputCategoryName {
                                width: 100%;
                            }
                        }
                    }

                    .middle {
                        .title {
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--color-text, #111827);
                        }
                    }
                }

                .macroTableBody {
                    height: auto;
                    overflow: hidden;
                }
            }

            .macroTableInner {
                width: 100%;
            }

            .colId {
                width: 52px;
            }

            .colActions {
                width: 82px;
                text-align: center;
            }

            .colSlug {
                width: 180px;
            }

            .rowCategoryItem .btnIcon {
                width: 26px;
                height: 26px;
            }

            .rowCategoryItem {
                .tableInput {
                    min-height: 38px;
                }
            }

            .rowInputs {
                td {
                    background: var(--color-table-highlight);
                }

                .btnCategoryAdd {
                    width: 32px;
                    height: 32px;
                }
            }
        }
    }
}