@import "base/base";
@import "base/reset";

@import "utils/mixins";
@import "utils/utils";

@import "componets/status";
@import "componets/small_table";
@import "componets/my_table";

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.base-subtitle {
    position: relative;
    padding-left: 12px;
    line-height: 24px;
    font-size: 15px;
    font-weight: 400;
    &::before {
        content: "";
        display: block;
        width: 3px;
        background: #5979ea;
        height: 15px;
        border-radius: 4px;
        position: absolute;
        top: 5px;
        left: 0;
    }
}

h4.second-title {
    @extend .base-subtitle;
    &::before {
        background: #5979ea;
    }
}

h4.subtitle {
    @extend .second-title;
    &::before {
        background: #bda366;
    }
}

.details-wrap {
    display: flex;
    padding-top: 10px;
    .left-box {
        width: 200px;
        height: 100%;

        .user-list-ul {
            height: calc(100% - 50px);
            overflow-y: auto;
            li {
                height: 42px;
                border: 1px solid #ebeef5;
                border-top: none;
                position: relative;
                cursor: pointer;
                transition: border 200ms;
                img {
                    object-fit: cover;
                    width: 30px;
                    height: 30px;
                    border-radius: 3px;
                }

                span.stu-name {
                    height: 20px;
                    line-height: 20px;
                    display: inline-block;
                    width: 60px;
                }
                span.stu-card {
                    width: 50px;
                    text-align: right;
                }
            }
            li.active {
                // background: #f3f3f3;
                color: #7892ed;
                border-right: 3px solid #5979ea;
            }
        }
    }
    .right-box {
        width: 100%;
        padding: 0 15px;
    }
}

/* 表格加载（规范 §4 表格加载行）：图形=通道 .ysch-spin（随 --brand），本地零图形资产 */
.table-spin-load {
    position: relative;
    width: 60px;
    height: 90px;
    padding-top: 60px;
    border: none;
    color: var(--brand);
    margin: 0 auto;
    text-align: center;
}
.table-spin-load .ysch-spin {
    position: absolute;
    left: 50%;
    top: 0;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    font-size: 60px; /* .ysch-spin 尺寸=1em，60px 图形用字号给 */
}

.ivu-table-cell-tree {
    margin-right: 4px;
    margin-bottom: 2px;
}

/* ================= 表格操作列（utils/tableActions.ts）=================
   .op-cell：flex 横排容器——把 iView Tooltip/Dropdown 的块级包装层降级为 flex item，
   强制横排（根因：.operating-btn 在通道基线 display:block，.ivu-tooltip 包装层默认 block，
   逐钮竖排；不要再在 cell 上动 display，会牵连其它列）。
   先落工程内，四端同构后此段上提 YschTheme 主题层。 */
.op-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    // 链间距统一由容器 gap 管理，退役通道基线的 padding-right:10px
    .operating-link {
        padding-right: 0;
        white-space: nowrap;
    }
}

/* 「更多▾」触发器（Dropdown transfer 后菜单挂 body，样式必须全局） */
.op-more {
    .op-more-label {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }

    .op-more-arrow {
        font-size: 12px;
    }
}

/* 「更多」菜单内危险项（红色 + hover 红底，与 text-error 同源 $color-error） */
.ivu-dropdown-item.op-item-danger {
    color: $color-error !important;

    &:hover {
        color: $color-error !important;
        background-color: rgba(232, 104, 74, 0.08);
    }
}