.container {
    display: flex;
    gap: 16px;
    padding: 16px;
    background-color: #fff;
    min-height: 520px;

    .leftPanel {
        flex: 0 0 320px;
        background: #e9f3ef;
        border-radius: 2px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04)
    }

    .rightPanel {
        flex: 1;
        // background: #fff;
        // border-radius: 12px;
        // padding: 15px 20px;
        // box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
        display: flex;
        flex-direction: column;
        // gap: 16px;
    }

    .blockHeader {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;

        .titleIcon {
            width: 3px;
            height: 16px;
            border-radius: 2px;
            background: rgba(0, 102, 101, 1);
            display: inline-block;
        }

        .blockTitle {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
        }
    }

    .filters {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;

        .filterSelect {
            width: 100%;

            :global(.ant-select-selector) {
                border: 1px solid rgba(45, 158, 157, 1);
                border-radius: 2px;
            }

            :global(.ant-select-focused .ant-select-selector) {
                border-color: rgba(45, 158, 157, 1) !important;
                box-shadow: 0 0 0 2px rgba(45, 158, 157, 0.2) !important;
            }

            :global(.ant-select:hover .ant-select-selector) {
                border-color: rgba(45, 158, 157, 1) !important;
            }
        }
    }

    .treeWrapper {
        flex: 1;
        overflow: hidden;

        .tree {
            background-color: transparent;

            :global(.ant-tree-switcher) {
                display: flex;
                align-items: center !important;
            }

            :global(.ant-tree-indent-unit:before) {
                border-inline-end: 1px solid rgba(0, 102, 101, 1) !important;
            }

            :global(.ant-tree-switcher-leaf-line:after) {
                border-bottom: 1px solid rgba(0, 102, 101, 1) !important;
            }

            :global(.ant-tree-switcher-leaf-line:before) {
                border-inline-end: 1px solid rgba(0, 102, 101, 1) !important;
            }

            :global(.ant-tree-checkbox-inner) {
                border: 1px solid rgba(0, 102, 101, 1);
                border-radius: 4px;

                &:hover {
                    background-color: rgba(0, 102, 101, 1);
                    border: 1px solid rgba(0, 102, 101, 1);
                    border-radius: 4px;
                }

                &:after {
                    background-color: transparent !important;
                }
            }

            :global(.ant-tree-checkbox-checked .ant-tree-checkbox-inner),
            :global(.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner) {
                background-color: rgba(0, 102, 101, 1) !important;
                border-color: rgba(0, 102, 101, 1) !important;
                border-radius: 4px;
            }

            :global(.ant-tree) {
                background-color: transparent;
            }

            :global(.ant-tree-treenode) {
                padding: 2px 0;
            }

            :global(.ant-tree-node-content-wrapper) {
                padding: 2px 4px;
                border-radius: 4px;
                transition: background 0.2s ease;

                &:hover {
                    background: rgba(196, 225, 214, 0.3);
                }
            }

            :global(.ant-tree-node-selected) {
                background: rgba(190, 215, 210, 1) !important;
            }
        }
    }

    .trendCard {
        // background: #fff;
        // border-radius: 10px;
        // border: 1px solid #e0eeea;
        padding: 12px 12px 16px;
        // box-shadow: 0 6px 16px rgba(12, 49, 41, 0.06);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .trendHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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

    .titleIcon {
        width: 2px;
        height: 16px;
        border-radius: 2px;
        background: rgba(0, 102, 101, 1);
        display: inline-block;
    }

    .rangeSelect {
        width: 120px;

        :global(.ant-select-selector) {
            border: 1px solid rgba(45, 158, 157, 1);
            border-radius: 4px;
            height: 28px;
        }

        :global(.ant-select-focused .ant-select-selector) {
            border-color: rgba(45, 158, 157, 1) !important;
            box-shadow: 0 0 0 2px rgba(45, 158, 157, 0.2) !important;
        }

        :global(.ant-select:hover .ant-select-selector) {
            border-color: rgba(45, 158, 157, 1) !important;
        }
    }

    .chartWrapper {
        width: 100%;
        height: 280px;
        background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
        border-radius: 8px;
        border: 1px solid #e6f1ec;
        padding: 6px;
        box-sizing: border-box;
    }
}

.treeNodeTitle {
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    position: relative;
    padding-right: 40px;
    margin-right: 80px;

    .nodeText {
        flex: 1;
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 12px;
    }

    .nodeTag {
        text-align: center;
        padding: 0px 6px;
        border-radius: 2px;
        font-size: 11px;
        font-weight: 400;
        position: absolute;
        right: 0;
        margin-right: 0;

        &.tag-depot {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }

        &.tag-area {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }

        &.tag-sensor {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }

        &.tag-tank {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }

        &.tag-group {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }

        &.tag-device {
            background: rgba(196, 225, 214, 1);
            color: rgba(0, 0, 0, 1);
        }
    }
}

.addLevelButton {
    padding: 8px 12px;
    border-radius: 2px;
    background: #2e6a5e;
    color: #ffffff;
    display: inline-flex;
    align-items: center;



    &:hover,
    &:focus {
        background: #2e6a5e;
        color: #ffffff;
    }
}