@border-style: 1px solid #f0f0f0;
@header-bg: #fafafa;
@content-bg: white;

@approve-users-flex-width: 6;
@approve-panel-flex-width: 3;

.ml-15 { margin-left: 15px; }
.mv-5 { margin: 5px 0; }
.m-10 { margin: 10px; }

.drilling_category {
    margin-top: 10px;
    border: @border-style;

    > .category_header {
        padding: 5px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: @border-style;
        background-color: @header-bg;

        > h3 {
            margin: 0;
        }

        > div > * {
            margin-left: 5px;
        }
    }

    > .category_content {
        display: flex;

        > div {
            display: flex;
            align-items: stretch;
            background-color: @content-bg;
            .drilling-category-column();
        }

        > .file_column {
            > .file_info {
                flex: 10;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            > .file_actions {
                flex: 2;
                display: flex;
                flex-direction: column;
            }
        }
    }
}

.approve_column {
    > .user_list {
        display: flex;
        flex-wrap: wrap;
        flex: @approve-users-flex-width;

        > span { margin: 5px 10px; }
    }

    > .approve_list,
    > .reject_list {
        display: flex;
        flex-direction: column;
        flex: @approve-panel-flex-width;
        margin: 0 5px;

        > .panel {
            display: flex;
            flex-direction: column;
            padding: 10px;
            flex-grow: 1;

            > .panel_title {
                margin: 5px;
                font-weight: 800;
            }

            > .panel_content {
                display: flex;
                justify-content: flex-end;
                flex-direction: column-reverse;
                align-items: stretch;
                flex-grow: 1;

                > div {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }

    > .approve_list > .panel {
        background-color: #EFFEEF;
        border: 1px solid #1FB448;
    }

    > .reject_list > .panel {
        background-color: #FEF2EF;
        border: 1px solid #B4661F;
    }
}

.history_approve_column {
    .approve_column();
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.category_adder {
    display: flex;
    margin: 5px;

    > .adder_select {
        flex-grow: 1;
        margin-right: 5px;
    }
}

.drilling_program {
    border: @border-style;
    border-top: 0;

    > .program_header {
        .drilling_category > .category_header();
    }

    > .program_content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: white;

        .program_status {
            margin: 10px;
            color: black;
        }

        .program_status.error {
            color: red;
        }
    }
}

/** Миксин для столбцов сетки (размер, отступы, границы) */
.drilling-category-column(@first: 4, @last: 8, @padding: 5px 10px) {
    padding: @padding;
    &:first-child { flex: @first; } // Относительная ширина первого столбца
    &:last-child { flex: @last; } // Относительная ширина второго столбца
    &:not(:last-child) { border-right: @border-style; }
}