/* Toast 栈：渲染在 top document，`position: fixed` 相对视口定位。
   子项之间由 flex + gap 自动堆叠 —— 不再需要按条数手算 offset
   （旧实现步长写死 64px，长消息换行后会互相重叠），也不再需要 layer 承载。
   z-index 取全局最高档，保证盖在 layer 弹窗之上。 */
.admin-toast-stack {
    position: fixed;
    top: 24px;
    left: 50%;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--admin-space-2);
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--admin-space-2);
    box-sizing: border-box;
    position: relative;
    min-height: 44px;
    min-width: min(126px, calc(100vw - 32px));
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 18px;
    overflow: hidden;
    /* 语义底/语义边框由变体（--success/--error/--info）注入，缺省回退中性表面。
       注意：底色必须是「不透明表面色 + 语义色调叠加」，
       不能直接把 rgba(...) 当 background，否则抽屉/遮罩会透上来，长消息时尤其明显。 */
    background-color: var(--admin-toast-surface, var(--admin-surface));
    background-image: linear-gradient(var(--admin-toast-tint, transparent), var(--admin-toast-tint, transparent));
    border: 1px solid var(--admin-toast-border, var(--color-border-soft));
    border-left-width: 3px;
    border-left-color: var(--admin-toast-accent, var(--color-border-soft));
    border-radius: var(--admin-radius-md);
    box-shadow: var(--admin-shadow-popover);
    color: var(--color-text-primary);
    font-size: var(--admin-font-size-sm);
    line-height: 1.45;
    pointer-events: auto;
    cursor: pointer;
    animation: adminToastIn 180ms ease-out both;
}

/* 退场：由 admin-ui.js 的 dismissToast() 在销毁前挂上，180ms 后移除节点
   （时长与脚本里的 TOAST_EXIT_DURATION 对齐）。 */
.admin-toast--closing {
    animation: adminToastOut 180ms ease-in both;
    pointer-events: none;
}

.admin-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--admin-toast-accent);
    color: var(--color-white);
    line-height: 1;
}

.admin-toast-text {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
    color: var(--color-text-primary);
}

.admin-toast--success {
    --admin-toast-accent: var(--color-success);
    --admin-toast-tint: rgba(0, 128, 38, 0.06);
    --admin-toast-border: rgba(0, 128, 38, 0.28);
}

.admin-toast--success .admin-toast-icon::before {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-1px) rotate(-45deg);
}

.admin-toast--error {
    --admin-toast-accent: var(--color-error);
    --admin-toast-tint: rgba(203, 39, 45, 0.06);
    --admin-toast-border: rgba(203, 39, 45, 0.28);
}

.admin-toast--error .admin-toast-icon::before, .admin-toast--error .admin-toast-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 1.5px;
    border-radius: var(--admin-radius-full);
    background: currentColor;
}

.admin-toast--error .admin-toast-icon::before {
    transform: rotate(45deg);
}

.admin-toast--error .admin-toast-icon::after {
    transform: rotate(-45deg);
}

.admin-toast--info {
    --admin-toast-accent: var(--main-color);
    /* 与 success/error 一致：色调走 overlay，底色保持不透明表面，避免抽屉/遮罩透上来 */
    --admin-toast-tint: var(--main-light-color);
    --admin-toast-info-icon-type-size: 11px;
}

.admin-toast--info .admin-toast-icon::before {
    content: "i";
    font-size: var(--admin-toast-info-icon-type-size);
    font-weight: 700;
    line-height: 1;
}

@keyframes adminToastIn {
    from {
        opacity: 0;
        transform: translate3d(10px, -8px, 0) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes adminToastOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(10px, -8px, 0) scale(0.98);
    }
}

.layui-layer.admin-dialog-layer, .layui-layer.admin-frame-layer {
    box-sizing: border-box;
    border: 0;
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow-modal);
}

/* 标题栏：字重与字号与页标题同档，底部细分隔线保留（弹窗必须有明确的两块分区）。 */
.admin-dialog-layer .layui-layer-title, .admin-frame-layer .layui-layer-title {
    height: 48px;
    padding: 0 56px 0 20px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-surface);
    color: var(--admin-text-strong);
    font-size: var(--admin-font-size-base);
    font-weight: 600;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dialog-layer .layui-layer-content {
    color: var(--admin-text);
    font-size: var(--admin-font-size-sm);
    line-height: var(--admin-line-height-base);
}

.admin-confirm-layer .layui-layer-content, .admin-alert-layer .layui-layer-content {
    padding: 24px;
    color: var(--admin-text-strong);
}

.admin-dialog-layer .layui-layer-setwin, .admin-frame-layer .layui-layer-setwin {
    display: flex;
    align-items: center;
    gap: 8px;
    top: 8px;
    right: 12px;
}

.admin-dialog-layer .layui-layer-setwin a, .admin-frame-layer .layui-layer-setwin a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: var(--admin-radius-sm);
    color: var(--color-text-muted);
    opacity: 1;
    transition: background-color var(--admin-transition-fast), color var(--admin-transition-fast);
}

.admin-dialog-layer .layui-layer-setwin a:hover, .admin-frame-layer .layui-layer-setwin a:hover {
    background-color: var(--admin-surface-muted);
    color: var(--color-text-primary);
}

.admin-dialog-layer .layui-layer-setwin .layui-layer-close1,
.admin-frame-layer .layui-layer-setwin .layui-layer-close1 {
    background-image: none;
}

.admin-dialog-layer .layui-layer-close1::before,
.admin-frame-layer .layui-layer-close1::before {
    content: "\00d7";
    font: 24px/1 var(--font-family-base);
}

/* 底部操作区：右对齐、按钮由右至左为「主操作 → 取消」，
   按钮高度/圆角/字号与全局 .btn 完全一致（不再自成一档 34px）。 */
.admin-dialog-layer .layui-layer-btn, .admin-frame-layer .layui-layer-btn {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-surface-muted);
    text-align: right;
}

.admin-dialog-layer .layui-layer-btn a, .admin-frame-layer .layui-layer-btn a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--backend-button-height);
    height: auto;
    min-width: var(--backend-small-action-button-min-width);
    max-width: 100%;
    text-align: center;
    margin: 0;
    padding: 8px 16px;
    border-radius: var(--admin-radius-md);
    border-color: var(--admin-border-strong);
    background: var(--admin-surface);
    color: var(--color-text-primary);
    font-size: var(--admin-font-size-sm);
    line-height: 18px;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: color var(--admin-transition-fast), border-color var(--admin-transition-fast), background-color var(--admin-transition-fast);
}

.admin-dialog-layer .layui-layer-btn a:hover, .admin-frame-layer .layui-layer-btn a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    background: var(--main-light-color);
}

/* 主按钮：实心主色即可表达优先级，不再叠一层彩色投影。 */
.admin-dialog-layer .layui-layer-btn .layui-layer-btn0, .admin-frame-layer .layui-layer-btn .layui-layer-btn0 {
    order: 1;
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--color-white);
}

.admin-dialog-layer .layui-layer-btn .layui-layer-btn0:hover, .admin-frame-layer .layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--main-hover-color);
    background: var(--main-hover-color);
    color: var(--color-white);
}

.layui-layer.admin-loading-layer {
    border-radius: var(--admin-radius-lg);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

/* 右侧抽屉：满高贴边，去掉圆角，阴影只向左扩散。
   入场必须是从右边缘滑入 —— layer 默认 shift:0 只加 .layer-anim，其动画是 bounceIn
   （transform: scale(.5) → scale(1) 的整体缩放入场，配 .layui-layer 的 .3s/both），
   用在满高右抽屉上会变成"从右下角长出来"；而 layer 内置的 01~06 里也没有右滑入
   （04 是 rollIn：translateX(-100%) rotate(-120deg)，带 120° 旋转且从左侧来）。
   故在抽屉皮肤上自绘一条右滑入，用更高特异性压掉 .layer-anim 的 animation-name。
   fill-mode 用 backwards 而非 both：动画结束后不留常驻 transform，
   避免把抽屉变成 fixed 后代的 containing block 并长期占用 GPU 合成层。
   时长/缓动与 .admin-toast 的 180ms 同档；reduced-motion 由 root.css 的全局媒体查询兜底。 */
@keyframes adminDrawerSlideIn {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.layui-layer.admin-drawer-layer {
    border-radius: 0;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
    animation: adminDrawerSlideIn 240ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* 抽屉退场：layer v2.4 的 close 是立即 remove()，没有退场动画，故由 admin-ui.js 先加
   .admin-drawer-closing（本类），等滑出动画跑完再真正关闭。方向与入场对称（向右滑出）。 */
@keyframes adminDrawerSlideOut {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

.layui-layer.admin-drawer-layer.admin-drawer-closing {
    animation: adminDrawerSlideOut 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.admin-drawer-layer .layui-layer-title {
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .layui-layer.admin-drawer-layer,
    .layui-layer.admin-drawer-layer.admin-drawer-closing {
        animation: none;
    }
}

/* Keyboard focus: replace browser default with a branded focus ring */
html :focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* Mouse focus (:focus without :focus-visible) stays suppressed */
a:focus:not(:focus-visible), button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Form controls already have their own focus ring via --admin-focus-ring */
.text_input:focus-visible, .text_input2:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}

/* ========== 分组多选字段 ==========
   一个字段内包含多组选项、每组独立 name（如审核人员：N 级 × 角色组/人员组）。
   字段本身用 Field::custom 组装结构，样式统一留在这里，业务模板不写 <style>。 */
.admin-field-groups {
    /* 节点内标签列宽，调整这一处即可 */
    --admin-field-groups-label-width: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.admin-field-groups__step {
    padding: 10px 12px 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

/* 免审核这类「附加规则」用虚线弱化，与正式审核级区分 */
.admin-field-groups__step--muted {
    background: transparent;
    border-style: dashed;
}

.admin-field-groups__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--admin-form-label-color, #374151);
}

.admin-field-groups__head::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--main-color, #2f6fed);
}

.admin-field-groups__step--muted .admin-field-groups__head::before {
    background: var(--color-text-muted, #9ca3af);
}

.admin-field-groups__head-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--admin-form-notice-color, #9ca3af);
}

.admin-field-groups__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.admin-field-groups__row + .admin-field-groups__row {
    margin-top: 6px;
}

.admin-field-groups__label {
    flex: 0 0 var(--admin-field-groups-label-width);
    width: var(--admin-field-groups-label-width);
    font-size: 12px;
    line-height: 24px;
    color: var(--admin-form-notice-color, #9ca3af);
}

.admin-field-groups__options {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-width: 0;
}

.admin-field-groups__options .normal {
    margin: 0;
    line-height: 24px;
}

.admin-field-groups__empty {
    font-size: 12px;
    line-height: 24px;
    color: var(--color-text-muted, #b4b2a9);
}

/* 卡片较高：标签与卡片标题顶部对齐，避免垂直居中后飘在中间 */
.web > li:has(> .ibw400 > .admin-field-groups) {
    align-items: flex-start;
}

.web > li:has(> .ibw400 > .admin-field-groups) > .label2 {
    height: auto;
    padding-top: 10px;
    line-height: 1.4;
}

/* 选项少时不要把卡片拉到整行宽，避免右侧大片空白 */
.admin-field-groups {
    max-width: 560px;
}
