/* ============================================================
   RTHW 后台统一 UI 令牌与通用组件（/assets/admin-ui.css）
   2026-09-25 建立（Jev 决策：strategy=hybrid，tokens 结构性统一）

   覆盖范围：账号中心 / 工具管理后台 / 集学后台 / 行查后台 / 认证知识库后台

   设计原则：
   1. 本文件只提供「设计令牌 + 显式引用的 .rui-* 组件类」，
      不重写任何模块已有的全局选择器，接入后桌面端版式零变化。
   2. 统一的是**结构令牌**（间距 / 圆角 / 控件高度 / 字号 / 动效时长 / 阴影 / 焦点环），
      各模块保留自身主色与局部微调。
   3. 动效等级按 Jev 判定取「克制」：只做颜色、阴影、边框的过渡
      （统一 160ms + 同一条缓动曲线），不新增装饰性位移动画；
      功能性的抽屉滑入由各模块既有实现负责，仅统一时长。
   ============================================================ */

:root {
    /* ---- 圆角 ---- */
    --rui-radius: 10px;
    --rui-radius-sm: 8px;
    --rui-radius-lg: 12px;
    --rui-radius-pill: 999px;

    /* ---- 间距刻度 ---- */
    --rui-gap-1: 8px;
    --rui-gap-2: 12px;
    --rui-gap-3: 16px;
    --rui-gap-4: 24px;
    --rui-pad-card: 16px;
    --rui-pad-card-lg: 20px;

    /* ---- 控件 ---- */
    --rui-ctl-h: 40px;            /* PC 端输入框 / 按钮高度 */
    --rui-ctl-h-touch: 44px;      /* 移动端输入框 / 按钮高度（手指友好） */
    --rui-font-ctl: 14px;         /* PC 端控件字号 */
    --rui-font-ctl-touch: 16px;   /* 移动端控件字号（iOS 聚焦不自动放大） */

    /* ---- 动效 ---- */
    --rui-dur: 160ms;
    --rui-ease: cubic-bezier(.4, 0, .2, 1);

    /* ---- 层次与反馈 ---- */
    --rui-focus-ring: 0 0 0 3px rgba(0, 117, 222, .18);
    --rui-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --rui-shadow-2: 0 4px 12px rgba(16, 24, 40, .08);
    --rui-line: rgba(0, 0, 0, .1);
    --rui-surface: #fff;
    --rui-elevated: #fafaf9;

    /* ---- 布局基线 ---- */
    --rui-topbar-h: 56px;
    --rui-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------
   可隐藏菜单（顶部导航型模块通用）
   用法：容器加 .rui-nav，旁边放 .rui-nav-toggle 按钮，
   脚本切换 .rui-nav 上的 .is-open 与按钮的 aria-expanded。
   桌面端永远展开；≤768px 默认收起，点按钮重新显示。
   ------------------------------------------------------------ */
.rui-nav-toggle {
    display: none;
    align-items: center; justify-content: center; gap: 6px;
    height: var(--rui-ctl-h); min-width: 44px; padding: 0 12px;
    border: 1px solid var(--rui-line); border-radius: var(--rui-radius-sm);
    background: var(--rui-surface); color: inherit;
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color var(--rui-dur) var(--rui-ease),
                border-color var(--rui-dur) var(--rui-ease),
                color var(--rui-dur) var(--rui-ease);
}
.rui-nav-toggle:hover { border-color: rgba(0, 117, 222, .45); color: #0075de; }
.rui-nav-toggle:focus-visible { outline: none; box-shadow: var(--rui-focus-ring); }
.rui-nav-toggle .rui-ico { font-size: 15px; line-height: 1; }
.rui-nav-toggle .rui-caret { font-size: 10px; transition: transform var(--rui-dur) var(--rui-ease); }
.rui-nav-toggle[aria-expanded="true"] .rui-caret { transform: rotate(180deg); }

@media (max-width: 768px) {
    .rui-nav-toggle { display: inline-flex; }
    /* 收起：菜单整体隐藏；展开：纵向铺满一行，每项都有整行点击区 */
    .rui-nav { display: none; }
    .rui-nav.is-open {
        display: flex; flex-direction: column; gap: 2px;
        width: 100%; padding: 6px 0 8px;
    }
    .rui-nav.is-open > * { width: 100%; }
}

/* ------------------------------------------------------------
   通用小工具（按需显式引用，不覆盖模块既有样式）
   ------------------------------------------------------------ */
/* 横向滚动容器：表格 / 长标签行在窄屏不撑破页面 */
.rui-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* 底部安全区：iPhone 小黑条不遮住末尾内容 */
.rui-safe-pb { padding-bottom: calc(var(--rui-gap-4) + var(--rui-safe-b)); }

/* 卡片：只在模块尚未定义卡片样式时使用，避免与 .card/.adm-card 等冲突 */
.rui-card {
    background: var(--rui-surface);
    border: 1px solid var(--rui-line);
    border-radius: var(--rui-radius-lg);
    box-shadow: var(--rui-shadow-1);
    padding: var(--rui-pad-card-lg);
}

/* 字段：标签在上、控件在下，控件高度与焦点环走统一令牌 */
.rui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rui-field > label { font-size: 12px; font-weight: 600; color: inherit; opacity: .75; }
.rui-field > input,
.rui-field > select,
.rui-field > textarea {
    width: 100%; height: var(--rui-ctl-h); padding: 0 12px;
    border: 1px solid var(--rui-line); border-radius: var(--rui-radius-sm);
    font-family: inherit; font-size: var(--rui-font-ctl); color: inherit;
    background: var(--rui-surface);
    transition: border-color var(--rui-dur) var(--rui-ease),
                box-shadow var(--rui-dur) var(--rui-ease);
}
.rui-field > textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.rui-field > input:focus,
.rui-field > select:focus,
.rui-field > textarea:focus { outline: none; box-shadow: var(--rui-focus-ring); }

/* 移动端：控件放大到触摸尺寸，字号 16px 防 iOS 缩放 */
@media (max-width: 768px) {
    .rui-field > input,
    .rui-field > select { height: var(--rui-ctl-h-touch); font-size: var(--rui-font-ctl-touch); }
    .rui-field > textarea { font-size: var(--rui-font-ctl-touch); }
}

/* 分区标题：长列表滚动时的分组标识 */
.rui-sec-title {
    display: flex; align-items: center; gap: 8px;
    margin: var(--rui-gap-4) 0 var(--rui-gap-2);
    padding-bottom: 8px; border-bottom: 1px solid var(--rui-line);
    font-size: 14px; font-weight: 600;
}
.rui-sec-title .rui-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }