/* ==========================================================================
   u-tokens.css —— 后台统一设计令牌与组件基线
   --------------------------------------------------------------------------
   适用：laravel-taskapp-admin_gitee（Laravel 5.4 + Blade + Bootstrap 5.3.8）
   注意：Laravel 5.4 的 Blade 无 @csrf 指令（5.6 才引入），需手写
         <input type="hidden" name="_token" value="{{ csrf_token() }}">
   规范：uni-app-flat-ui-system（跨端统一 UI 规范）
   版本：1.0.0

   架构（两层，职责分离）：
     ① 静态层（本文件）—— 令牌默认值 + 组件基线，版本受控、可被浏览器缓存
     ② 动态层 —— App\Services\StyleSettingsService 输出的 :root{...}
        内联在 <head> 的 <style> 中，在 <link> 之后，同权重下后者胜出

   铁律（与移动端规范一致）：
     1. 禁止任何装饰性 linear-gradient / radial-gradient
     2. 禁止彩色阴影（阴影基色只用 slate-900 中性色）
     3. 只允许使用本文件定义的令牌，页面内不得出现裸色值
     4. 正文对比度 ≥ 4.5:1，正文最小字号 14px
     5. 页面样式只管布局，视觉一律由令牌驱动
   ========================================================================== */

/* ==========================================================================
   ① 颜色令牌
   ========================================================================== */
:root {
    /* ---- 中性色阶（slate）---- */
    --u-n0:    #ffffff;
    --u-n50:   #f8fafc;
    --u-n100:  #f1f5f9;
    --u-n200:  #e2e8f0;
    --u-n300:  #cbd5e1;
    --u-n400:  #94a3b8;
    --u-n500:  #64748b;
    --u-n600:  #475569;
    --u-n700:  #334155;
    --u-n800:  #1e293b;
    --u-n900:  #0f172a;

    /* ---- 主色（blue，沿用数据库既有默认 #3b82f6）---- */
    --u-primary-50:  #eff6ff;
    --u-primary-100: #dbeafe;
    --u-primary-200: #bfdbfe;
    --u-primary-300: #93c5fd;
    --u-primary-400: #60a5fa;
    --u-primary-500: #3b82f6;
    --u-primary-600: #2563eb;
    --u-primary-700: #1d4ed8;
    --u-primary-800: #1e40af;
    --u-primary-900: #1e3a8a;

    /* ---- 语义色：成功 ---- */
    --u-success-50:  #ecfdf5;
    --u-success-100: #d1fae5;
    --u-success-500: #10b981;
    --u-success-600: #059669;
    --u-success-700: #047857;

    /* ---- 语义色：警告 ---- */
    --u-warning-50:  #fffbeb;
    --u-warning-100: #fef3c7;
    --u-warning-500: #f59e0b;
    --u-warning-600: #d97706;
    --u-warning-700: #b45309;

    /* ---- 语义色：危险 ---- */
    --u-danger-50:  #fef2f2;
    --u-danger-100: #fee2e2;
    --u-danger-500: #ef4444;
    --u-danger-600: #dc2626;
    --u-danger-700: #b91c1c;

    /* ---- 语义色：信息 ---- */
    --u-info-50:  #f0f9ff;
    --u-info-100: #e0f2fe;
    --u-info-500: #0ea5e9;
    --u-info-600: #0284c7;
    --u-info-700: #0369a1;

    /* ---- 荣誉/金豆（榜单专用，勿用于通用警示）---- */
    --u-gold-50:  #fffbeb;
    --u-gold-500: #f0b429;
    --u-gold-700: #92650a;

    /* ---- 文字（白底对比度已核算）---- */
    --u-text:           var(--u-n800);  /* 标题   13.7:1 ✓ */
    --u-text-body:      var(--u-n700);  /* 正文   11.4:1 ✓ */
    --u-text-secondary: var(--u-n500);  /* 次要    5.1:1 ✓ AA */
    --u-text-tertiary:  var(--u-n500);  /* 辅助    5.1:1 ✓（禁止更浅，见下）*/
    --u-text-disabled:  var(--u-n400);  /* 禁用    2.9:1（不承载信息，合规）*/
    --u-text-inverse:   #ffffff;

    /* ---- 背景 ---- */
    --u-bg-body:   var(--u-n50);
    --u-bg:        var(--u-n100);
    --u-bg-card:   var(--u-n0);
    --u-bg-sunken: var(--u-n100);
    --u-bg-hover:  var(--u-n100);

    /* ---- 边框 ---- */
    --u-border:        var(--u-n200);
    --u-border-strong: var(--u-n300);
    --u-divider:       var(--u-n200);

    /* ---- 既有变量别名（保持兼容，勿删：现有 62 个页面均引用）----
       这些旧命名原先只由 StyleSettingsService 动态输出，一旦 Service 异常
       则变量全空、样式崩坏。此处补入静态兜底，使「静态层永远完整」。 */
    --u-primary:     var(--u-primary-500);
    --u-dark:        var(--u-primary-700);
    --u-light:       var(--u-primary-50);
    --u-medium:      var(--u-primary-100);
    --u-shadow:      var(--u-sh-xs);
    --u-border-radius:  var(--u-r-lg);
    --u-btn-border-radius: var(--u-r-md);
    --u-btn-primary-bg:      var(--u-primary-500);
    --u-btn-primary-bg-dark: var(--u-primary-700);

    /* 分页 */
    --u-pagination-active-bg:     var(--u-primary-500);
    --u-pagination-active-color:  #ffffff;
    --u-pagination-border-radius: var(--u-r-md);

    /* 表格 —— 表头浅底上的文字用 -700 档，实测 #1d4ed8 on #eff6ff = 6.13:1 ✓ */
    --u-table-header-bg:    var(--u-primary-50);
    --u-table-header-color: var(--u-primary-700);
    --u-table-hover-bg:     var(--u-primary-50);

    /* 页面标题 */
    --u-page-title-color: var(--u-text);
    --u-page-title-size:  var(--u-fs-h2);

    --u-font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* ---- 交互态 ---- */
    --u-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.25);
    --u-focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);

    /* ---- 品牌点缀色（仅装饰性文字/图标，不作背景大面积铺陈）---- */
    --u-accent-teal:   #0d9488;
    --u-accent-purple: #7c3aed;
    --u-accent-orange: #ea580c;
}

/* ==========================================================================
   ② 字号 / 间距 / 圆角 / 阴影
   ========================================================================== */
:root {
    /* ---- 字号阶梯（9 档 + 英雄数字 2 档）---- */
    --u-fs-micro:    11px;   /* 徽章内小字，唯一允许低于 12px 的场景 */
    --u-fs-caption:  12px;   /* 表头、时间戳、辅助标注 */
    --u-fs-sm:       13px;   /* 密集表格单元格 */
    --u-fs-body:     14px;   /* 后台正文基准 */
    --u-fs-body-lg:  15px;   /* 表单控件输入文字 */
    --u-fs-title-sm: 16px;   /* 卡片标题 */
    --u-fs-title:    18px;   /* 区块标题 */
    --u-fs-h2:       20px;   /* 页面标题 */
    --u-fs-h1:       24px;   /* 页面主标题 */
    --u-fs-display:  30px;   /* 页头大数字 */
    --u-fs-hero:     36px;   /* 统计卡英雄数字（纯数字+单位）*/

    --u-lh-tight: 1.25;
    --u-lh-base:  1.5;
    --u-lh-loose: 1.7;

    --u-fw-normal:   400;
    --u-fw-medium:   500;
    --u-fw-semibold: 600;
    --u-fw-bold:     700;

    /* ---- 间距（4px 网格）---- */
    --u-sp-1:  4px;
    --u-sp-2:  8px;
    --u-sp-3:  12px;
    --u-sp-4:  16px;
    --u-sp-5:  20px;
    --u-sp-6:  24px;
    --u-sp-8:  32px;
    --u-sp-10: 40px;
    --u-sp-12: 48px;

    /* ---- 圆角 ---- */
    --u-r-xs:   4px;
    --u-r-sm:   6px;
    --u-r-md:   8px;
    --u-r-lg:   12px;
    --u-r-xl:   16px;
    --u-r-pill: 999px;

    /* ---- 阴影（中性基色 slate-900，零彩色）---- */
    --u-sh-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
    --u-sh-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --u-sh-md:    0 4px 12px rgba(15, 23, 42, 0.07);
    --u-sh-lg:    0 8px 24px rgba(15, 23, 42, 0.09);

    /* ---- 动效（统一 0.15s，避免 0.2/0.3/0.4 混用）---- */
    --u-dur:  0.15s;
    --u-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- 布局尺度 ---- */
    --u-header-h:  60px;
    --u-sidebar-w: 250px;
    --u-control-h: 36px;   /* 表单控件标准高度 */
    --u-btn-h:     36px;
    --u-btn-h-sm:  30px;
}

/* ==========================================================================
   ③ Bootstrap 5 变量桥接
   —— 让 .btn-* / .alert-* / .badge / .form-control 等原生组件自动跟随令牌，
      无需逐个覆盖样式
   ========================================================================== */
:root {
    --bs-primary: var(--u-primary-500);
    --bs-success: var(--u-success-500);
    --bs-warning: var(--u-warning-500);
    --bs-danger:  var(--u-danger-500);
    --bs-info:    var(--u-info-500);

    --bs-body-bg:   var(--u-bg-body);
    --bs-body-color: var(--u-text-body);
    --bs-border-color: var(--u-border);
    --bs-border-radius: var(--u-r-md);
    --bs-border-radius-sm: var(--u-r-sm);
    --bs-border-radius-lg: var(--u-r-lg);
    --bs-secondary-color: var(--u-text-secondary);
    --bs-link-color: var(--u-primary-600);
    --bs-link-hover-color: var(--u-primary-700);
    --bs-focus-ring-color: rgba(59, 130, 246, 0.25);
}

/* ---- 按钮：纯色实底，禁用渐变与彩色阴影 ---- */
.btn {
    --bs-btn-font-size: var(--u-fs-body);
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-weight: var(--u-fw-medium);
    --bs-btn-border-radius: var(--u-r-md);
    --bs-btn-transition: background-color var(--u-dur) var(--u-ease),
                         border-color var(--u-dur) var(--u-ease),
                         box-shadow var(--u-dur) var(--u-ease);
    --bs-btn-focus-box-shadow: var(--u-focus-ring);
    background-image: none;   /* 覆盖 BS3 时代遗留的渐变按钮 */
    box-shadow: none;
    min-height: var(--u-btn-h);
}

.btn-primary {
    --bs-btn-bg: var(--u-primary-500);
    --bs-btn-border-color: var(--u-primary-500);
    --bs-btn-hover-bg: var(--u-primary-600);
    --bs-btn-hover-border-color: var(--u-primary-600);
    --bs-btn-active-bg: var(--u-primary-700);
    --bs-btn-active-border-color: var(--u-primary-700);
    --bs-btn-disabled-bg: var(--u-primary-200);
    --bs-btn-disabled-border-color: var(--u-primary-200);
}

.btn-success {
    --bs-btn-bg: var(--u-success-500);
    --bs-btn-border-color: var(--u-success-500);
    --bs-btn-hover-bg: var(--u-success-600);
    --bs-btn-hover-border-color: var(--u-success-600);
    --bs-btn-active-bg: var(--u-success-700);
    --bs-btn-active-border-color: var(--u-success-700);
}

.btn-warning {
    --bs-btn-bg: var(--u-warning-500);
    --bs-btn-border-color: var(--u-warning-500);
    --bs-btn-hover-bg: var(--u-warning-600);
    --bs-btn-hover-border-color: var(--u-warning-600);
    --bs-btn-active-bg: var(--u-warning-700);
    --bs-btn-active-border-color: var(--u-warning-700);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
}

.btn-danger {
    --bs-btn-bg: var(--u-danger-500);
    --bs-btn-border-color: var(--u-danger-500);
    --bs-btn-hover-bg: var(--u-danger-600);
    --bs-btn-hover-border-color: var(--u-danger-600);
    --bs-btn-active-bg: var(--u-danger-700);
    --bs-btn-active-border-color: var(--u-danger-700);
}

.btn-outline-secondary {
    --bs-btn-color: var(--u-text-body);
    --bs-btn-border-color: var(--u-border-strong);
    --bs-btn-hover-bg: var(--u-n100);
    --bs-btn-hover-border-color: var(--u-border-strong);
    --bs-btn-hover-color: var(--u-text);
    --bs-btn-active-bg: var(--u-n200);
    --bs-btn-active-border-color: var(--u-border-strong);
    --bs-btn-active-color: var(--u-text);
}

.btn-sm {
    --bs-btn-font-size: var(--u-fs-sm);
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 12px;
    min-height: var(--u-btn-h-sm);
}

/* ---- 表单控件：统一高度、圆角、焦点环 ---- */
.form-control,
.form-select {
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-md);
    font-size: var(--u-fs-body-lg);
    color: var(--u-text-body);
    background-color: var(--u-bg-card);
    transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--u-primary-500);
    box-shadow: var(--u-focus-ring);
    background-color: var(--u-bg-card);
}

.form-control::placeholder {
    color: var(--u-n400);
}

.form-label {
    font-size: var(--u-fs-body);
    font-weight: var(--u-fw-medium);
    color: var(--u-text-body);
    margin-bottom: var(--u-sp-2);
}

.form-text {
    font-size: var(--u-fs-caption);
    color: var(--u-text-secondary);
}

/* ---- 表格 ---- */
.table {
    --bs-table-border-color: var(--u-border);
    --bs-table-hover-bg: var(--u-bg-hover);
    font-size: var(--u-fs-body);
    color: var(--u-text-body);
}

/* ---- 弹窗 ---- */
.modal-content {
    border: none;
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-sh-lg);
}

.modal-header {
    border-bottom: 1px solid var(--u-divider);
    padding: var(--u-sp-4) var(--u-sp-6);
    background-color: var(--u-bg-card);
}

.modal-title {
    font-size: var(--u-fs-title-sm);
    font-weight: var(--u-fw-semibold);
    color: var(--u-text);
}

.modal-body {
    padding: var(--u-sp-6);
}

.modal-footer {
    border-top: 1px solid var(--u-divider);
    padding: var(--u-sp-3) var(--u-sp-6);
    background-color: var(--u-bg-card);
}

/* ---- 下拉菜单 ---- */
.dropdown-menu {
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-md);
    box-shadow: var(--u-sh-md);
    font-size: var(--u-fs-body);
    padding: var(--u-sp-1);
}

.dropdown-item {
    border-radius: var(--u-r-xs);
    padding: 6px 12px;
    color: var(--u-text-body);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--u-bg-hover);
    color: var(--u-text);
}

/* ==========================================================================
   ④ 后台业务组件基线（u-* 体系）
   ========================================================================== */

/* ---- 卡片 ---- */
.u-card {
    border: 1px solid var(--u-border);
    border-radius: var(--u-border-radius, var(--u-r-lg));
    background: var(--u-bg-card);
    box-shadow: var(--u-shadow, var(--u-sh-xs));
    margin-bottom: var(--u-sp-6);
    overflow: hidden;
}

.u-card-header {
    background: var(--u-light);
    border-bottom: 1px solid var(--u-medium);
    padding: 14px var(--u-sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-sp-3);
}

.u-card-title {
    font-size: var(--u-fs-title-sm);
    font-weight: var(--u-fw-semibold);
    color: var(--u-primary-600);
    margin: 0;
}

.u-card-body { padding: var(--u-sp-5); }
.u-card-body.p-0 { padding: 0; }

.u-card-footer {
    background: var(--u-bg);
    border-top: 1px solid var(--u-border);
    padding: var(--u-sp-3) var(--u-sp-5);
}

/* ---- 表格（嵌套卡片内时自动去边框圆角）---- */
.u-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--u-fs-body);
}

.u-table thead th {
    background: var(--u-table-header-bg, var(--u-primary-100));
    color: var(--u-table-header-color, var(--u-primary-700));
    font-weight: var(--u-fw-semibold);
    font-size: var(--u-fs-caption);
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--u-medium);
    text-align: left;
}

.u-table tbody td {
    vertical-align: middle;
    padding: 10px 14px;
    border-bottom: 1px solid var(--u-border);
    font-size: var(--u-fs-body);
    color: var(--u-text-body);
    /* 行高治理：单元格默认不折行，行高恒为单行；
       空间不足由 .table-responsive 横向滚动接管 */
    white-space: nowrap;
    overflow-wrap: break-word;
}
/* 长文本列（备注/内容/描述等）显式加 .u-wrap 恢复折行 */
.u-table tbody td.u-wrap {
    white-space: normal;
    min-width: 10em;
}

.u-table tbody tr:hover { background: var(--u-table-hover-bg, var(--u-primary-50)) !important; }
.u-table tbody tr:last-child td { border-bottom: none; }
.u-table.table-bordered { border: 1px solid var(--u-border); }
.u-table.table-bordered th,
.u-table.table-bordered td { border: 1px solid var(--u-border); }

/* 数字列右对齐 + 等宽，便于纵向比对 */
.u-table .num,
.u-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive > .u-table { min-width: max(720px, 100%); }

/* ---- 页面标题栏 ---- */
.u-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--u-sp-4);
    padding: var(--u-sp-4) 0 var(--u-sp-3);
    margin-bottom: var(--u-sp-4);
    border-bottom: 1px solid var(--u-border);
}

.u-page-title {
    font-size: var(--u-page-title-size, var(--u-fs-h2));
    font-weight: var(--u-fw-bold);
    color: var(--u-page-title-color, var(--u-text));
    margin: 0;
    line-height: var(--u-lh-tight);
}

.u-page-subtitle {
    font-size: var(--u-fs-caption);
    color: var(--u-text-secondary);
    margin: var(--u-sp-1) 0 0;
}

/* ---- 卡片/盒子标题统一基线 ----
   Bootstrap 5 reboot 下裸 h3.card-title=28px、h5=20px、h4=24px，层级失控。
   统一收敛到「卡片标题」级 16px/600；页面主标题（.u-page-title 同元素）
   由下方更高特异性规则覆盖为 20px/700，两级层次从此固定。 */
.card-header .card-title,
.box-header .box-title {
    font-size: var(--u-fs-title-sm);
    font-weight: var(--u-fw-semibold);
    color: var(--u-text);
    margin: 0;
    line-height: 1.4;
}
.card-header .card-title.u-page-title,
.box-header .box-title.u-page-title {
    font-size: var(--u-page-title-size, var(--u-fs-h2));
    font-weight: var(--u-fw-bold);
}

/* ---- 弹窗标题统一（原 h4.modal-title = 24px/500 过大，收敛到区块标题级）---- */
.modal-title {
    font-size: var(--u-fs-title);
    font-weight: var(--u-fw-semibold);
}

/* ---- 主按钮（纯色，禁用渐变）---- */
.u-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--u-btn-primary-bg, var(--u-primary-500));
    border: 1px solid var(--u-btn-primary-bg, var(--u-primary-500));
    border-radius: var(--u-btn-border-radius, var(--u-r-md));
    min-height: var(--u-btn-h);
    padding: 6px 18px;
    color: #ffffff;
    font-size: var(--u-fs-body);
    font-weight: var(--u-fw-medium);
    text-decoration: none;
    box-shadow: none;
    transition: background-color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
    cursor: pointer;
}

.u-btn-primary:hover,
.u-btn-primary:focus {
    background: var(--u-primary-600);
    border-color: var(--u-primary-600);
    color: #ffffff;
}

.u-btn-primary:active { background: var(--u-primary-700); border-color: var(--u-primary-700); }

.u-btn-primary:disabled,
.u-btn-primary.disabled {
    background: var(--u-primary-200);
    border-color: var(--u-primary-200);
    color: #ffffff;
    cursor: not-allowed;
}

/* ---- 筛选表单 ---- */
.u-filter-form .form-control,
.u-filter-form .form-select {
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-md);
    padding: 6px 12px;
    font-size: var(--u-fs-body);
    min-height: var(--u-control-h);
}

.u-filter-form .form-control:focus,
.u-filter-form .form-select:focus {
    border-color: var(--u-primary-500);
    box-shadow: var(--u-focus-ring);
}

/* ---- 徽章：浅底 + 深字（对比度均 ≥ 4.5:1）---- */
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--u-r-sm);
    font-size: var(--u-fs-caption);
    font-weight: var(--u-fw-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.u-badge-blue   { background: var(--u-primary-100); color: var(--u-primary-700); }
.u-badge-green  { background: var(--u-success-100); color: var(--u-success-700); }
.u-badge-gray   { background: var(--u-n100);        color: var(--u-n600); }
.u-badge-info   { background: var(--u-info-100);    color: var(--u-info-700); }
.u-badge-warn   { background: var(--u-warning-100); color: var(--u-warning-700); }
.u-badge-danger { background: var(--u-danger-100);  color: var(--u-danger-700); }
.u-badge-gold   { background: var(--u-gold-50);     color: var(--u-gold-700); }

/* ---- 提示条 ---- */
.u-alert-info {
    display: flex;
    align-items: flex-start;
    gap: var(--u-sp-2);
    background: var(--u-primary-50);
    border: 1px solid var(--u-primary-100);
    color: var(--u-primary-700);
    border-radius: var(--u-r-md);
    padding: 12px 16px;
    font-size: var(--u-fs-body);
    margin-bottom: var(--u-sp-4);
}

/* ---- 分页（唯一基线，页面内勿重复覆盖）---- */
.u-pagination-wrap {
    display: flex;
    justify-content: center;
    padding: var(--u-sp-5) 0;
}

.pagination {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pagination li a,
.pagination li span,
.pagination .page-item > .page-link {
    display: inline-block;
    border-radius: var(--u-pagination-border-radius, var(--u-r-md)) !important;
    border: 1px solid var(--u-border);
    color: var(--u-text-secondary);
    background-color: var(--u-bg-card);
    font-weight: var(--u-fw-semibold);
    padding: 6px 13px;
    min-width: 36px;
    margin: 0;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
    font-size: var(--u-fs-sm);
}

.pagination li a:hover,
.pagination .page-item > .page-link:hover {
    background: var(--u-primary-50);
    border-color: var(--u-primary-500);
    color: var(--u-primary-600);
}

.pagination li.active span,
.pagination .page-item.active > .page-link {
    background: var(--u-pagination-active-bg, var(--u-primary-500)) !important;
    border-color: var(--u-pagination-active-bg, var(--u-primary-500)) !important;
    color: var(--u-pagination-active-color, #ffffff) !important;
}

.pagination li.disabled span,
.pagination .page-item.disabled > .page-link {
    color: var(--u-n400);
    background: var(--u-bg);
    border-color: var(--u-border);
}

/* ---- 统计卡（扁平版：白底 + 左侧色条，取代渐变块）---- */
.u-stat-card {
    position: relative;
    background: var(--u-bg-card);
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-lg);
    padding: var(--u-sp-5);
    box-shadow: var(--u-sh-xs);
    transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}

.u-stat-card:hover {
    border-color: var(--u-border-strong);
    box-shadow: var(--u-sh-sm);
}

.u-stat-card__value {
    font-size: var(--u-fs-hero);
    font-weight: var(--u-fw-bold);
    line-height: 1.1;
    color: var(--u-text);
    font-variant-numeric: tabular-nums;
}

.u-stat-card__label {
    font-size: var(--u-fs-caption);
    color: var(--u-text-secondary);
    margin-top: var(--u-sp-1);
}

/* ---- 图标块：纯色浅底 + 主色图标（取代渐变实底白图标）---- */
.u-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--u-r-lg);
    font-size: 20px;
    flex: 0 0 auto;
}

.u-icon-box--primary { background: var(--u-primary-100); color: var(--u-primary-600); }
.u-icon-box--success { background: var(--u-success-100); color: var(--u-success-700); }
.u-icon-box--warning { background: var(--u-warning-100); color: var(--u-warning-700); }
.u-icon-box--danger  { background: var(--u-danger-100);  color: var(--u-danger-700); }
.u-icon-box--info    { background: var(--u-info-100);    color: var(--u-info-700); }
.u-icon-box--neutral { background: var(--u-n100);        color: var(--u-n600); }

/* ---- 空态 ---- */
.u-empty {
    text-align: center;
    padding: var(--u-sp-12) var(--u-sp-5);
    color: var(--u-text-secondary);
}

.u-empty i {
    font-size: 40px;
    color: var(--u-n300);
    display: block;
    margin-bottom: var(--u-sp-3);
}

/* ==========================================================================
   ⑤ 侧边栏与顶栏（深色区，保持低饱和中性，不用品牌色大面积铺陈）
   ========================================================================== */
.u-sidebar {
    min-height: calc(100vh - var(--u-header-h));
    background-color: var(--u-n800);
    border-right: 1px solid var(--u-n700);
    padding: var(--u-sp-4) 0;
}

.u-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: var(--u-sp-3);
    color: var(--u-n300);
    padding: 10px var(--u-sp-4);
    border-radius: var(--u-r-md);
    font-size: var(--u-fs-body);
    font-weight: var(--u-fw-medium);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
    cursor: pointer;
}

.u-sidebar .nav-link:hover {
    color: #ffffff;
    background-color: var(--u-n700);
    transform: none;   /* 去掉位移抖动，扁平化 */
}

.u-sidebar .nav-link.active {
    color: #ffffff;
    background-color: var(--u-primary-600);
    box-shadow: none;  /* 去掉彩色阴影 */
}

.u-sidebar .nav-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
}

.u-navbar {
    background-color: var(--u-n900);
    border-bottom: 1px solid var(--u-n700);
    box-shadow: none;
    min-height: var(--u-header-h);
}

/* ==========================================================================
   ⑥ 工具类（替代散落的裸色值）
   ========================================================================== */
.u-text-primary   { color: var(--u-primary-600) !important; }
.u-text-success   { color: var(--u-success-600) !important; }
.u-text-warning   { color: var(--u-warning-600) !important; }
.u-text-danger    { color: var(--u-danger-600) !important; }
.u-text-info      { color: var(--u-info-600) !important; }
.u-text-muted     { color: var(--u-text-secondary) !important; }
.u-text-strong    { color: var(--u-text) !important; }

.u-bg-primary-subtle { background: var(--u-primary-50) !important; }
.u-bg-success-subtle { background: var(--u-success-50) !important; }
.u-bg-warning-subtle { background: var(--u-warning-50) !important; }
.u-bg-danger-subtle  { background: var(--u-danger-50) !important; }
.u-bg-info-subtle    { background: var(--u-info-50) !important; }
.u-bg-neutral-subtle { background: var(--u-n100) !important; }

.u-mono { font-variant-numeric: tabular-nums; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   ⑦ 可访问性
   ========================================================================== */

/* 键盘焦点始终可见（鼠标点击不显示，避免视觉噪音） */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--u-primary-500);
    outline-offset: 2px;
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 打印：去阴影、去背景、压暗文字保证可读 */
@media print {
    .u-card,
    .u-stat-card,
    .u-sidebar,
    .u-navbar,
    .u-page-header .btn { display: none !important; }
    .u-card { box-shadow: none !important; border-color: #999 !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   ⑧ 功能性渐变白名单（仅有 3 项，其他一律禁止）
   —— 这三项承载「状态表达」而非「装饰」，语义不可用纯色替代
   ========================================================================== */
:root {
    /* 骨架屏扫光 */
    --u-skeleton-base: #f1f5f9;
    --u-skeleton-shine: #e2e8f0;
}
.u-skeleton {
    background-color: var(--u-skeleton-base);
    background-image: linear-gradient(90deg, var(--u-skeleton-base) 25%, var(--u-skeleton-shine) 37%, var(--u-skeleton-base) 63%);
    background-size: 400% 100%;
    animation: u-skeleton-loading 1.4s ease infinite;
    border-radius: var(--u-r-sm);
}

@keyframes u-skeleton-loading {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* 长表格/长内容底部渐隐，提示「还有内容」 */
.u-fade-bottom {
    position: relative;
}
.u-fade-bottom::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* 图片上文字的可读性蒙层 */
.u-fade-image {
    position: relative;
}
.u-fade-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background-image: linear-gradient(to top, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0));
    pointer-events: none;
    border-radius: inherit;
}

/* ==========================================================================
   ⑧-2 实底图标块（替代散落在页面里的内联渐变）
   —— 原代码用 style="background: linear-gradient(...)" 给 info-box 图标上色，
      现统一为类名；底色取 -700 档，白字实测 5.0~6.6:1 达标 AA
   ========================================================================== */
.u-icon-solid-primary { background: var(--u-primary-700); color: var(--u-text-inverse); }
.u-icon-solid-success { background: var(--u-success-700); color: var(--u-text-inverse); }
.u-icon-solid-warning { background: var(--u-warning-700); color: var(--u-text-inverse); }
.u-icon-solid-danger  { background: var(--u-danger-700);  color: var(--u-text-inverse); }
.u-icon-solid-info    { background: var(--u-info-700);    color: var(--u-text-inverse); }
.u-icon-solid-neutral { background: var(--u-n600);        color: var(--u-text-inverse); }

/* ==========================================================================
   ⑨ 图标工具类（Bootstrap Icons 兼容层）
   --------------------------------------------------------------------------
   承接原 FontAwesome 的尺寸/动画修饰类。fa2bi.py 做机械替换时，
   fa-2x → bi-2x、fa-spin → spin，视觉表现与替换前等价。
   映射关系见 docs/ui-spec/tools/fa2bi.py
   ========================================================================== */
.bi-2x { font-size: 2em;    line-height: 1;      vertical-align: -0.15em; }
.bi-3x { font-size: 3em;    line-height: 1;      vertical-align: -0.225em; }
.bi-4x { font-size: 4em;    line-height: 1;      vertical-align: -0.3em; }
.bi-5x { font-size: 5em;    line-height: 1;      vertical-align: -0.375em; }
.bi-lg { font-size: 1.33em; line-height: 0.75em; vertical-align: -0.15em; }
.bi-sm { font-size: 0.875em; }
.bi-xs { font-size: 0.75em; }
.bi-fw { width: 1.25em; text-align: center; }

/* 加载态旋转（原 fa-spin = 匀速；原 fa-pulse = 八步跳变） */
.spin  { animation: u-spin 2s linear infinite; }
.pulse { animation: u-spin 1s steps(8) infinite; }

@keyframes u-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 尊重系统「减少动态效果」偏好（可访问性） */
@media (prefers-reduced-motion: reduce) {
    .spin,
    .pulse { animation: none; }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   ⑩ 第三方组件令牌化：SweetAlert2
   --------------------------------------------------------------------------
   背景：sweetalert2.min.js 一直有引入，但配套 CSS（public/css/sweetalert2.min.css）
        在历史上从未被任何布局 <link> 引入。缺少样式后 .swal2-container 退化为
        静态流元素（position: static），弹窗节点被追加到 <body> 末尾并按块级左对齐，
        表现为「点编辑后弹窗偏移到页面最左下角」。
   修复：layouts/app.blade.php 补 <link>，且本文件必须加载在其之后
        （同 :root 特异性下，后加载者覆盖 --swal2-* 默认值）。
   覆盖说明：该 CSS 为 v11，主规则均写成 div:where(.swal2-container) 形式，
        :where() 不计特异性（仅标签计入 = 0,0,1~2），故此处普通类选择器即可覆盖，
        全程无需 !important。
   ========================================================================== */
:root {
    /* ---- 外观：卡片底 + 中性遮罩 + 令牌圆角，零描边（扁平化铁律）---- */
    --swal2-background:       var(--u-bg-card);
    --swal2-color:            var(--u-text-body);      /* #334155 on #fff = 11.4:1 ✓ */
    --swal2-border:           none;
    --swal2-border-radius:    var(--u-r-lg);
    --swal2-backdrop:         rgba(15, 23, 42, 0.45);  /* slate-900，与 --u-sh-* 同基色 */
    --swal2-padding:          0 0 var(--u-sp-5);

    /* ---- 标题 / 内容区 ---- */
    --swal2-title-padding:          var(--u-sp-6) var(--u-sp-6) 0;
    --swal2-html-container-padding: var(--u-sp-5) var(--u-sp-6) var(--u-sp-2);

    /* ---- 表单控件：对齐 BS5 .form-control ---- */
    --swal2-input-border:           1px solid var(--u-border-strong);
    --swal2-input-border-radius:    var(--u-r-md);
    --swal2-input-background:       var(--u-bg-card);
    --swal2-input-focus-border:     1px solid var(--u-primary-500);
    --swal2-input-focus-box-shadow: var(--u-focus-ring);

    /* ---- 按钮：确认=主色、取消=中性、拒绝=危险色（与 .btn-* 语义一致）---- */
    --swal2-confirm-button-background-color: var(--u-primary-500);
    --swal2-confirm-button-border-radius:    var(--u-r-md);
    --swal2-cancel-button-background-color:  var(--u-n500);
    --swal2-cancel-button-border-radius:     var(--u-r-md);
    --swal2-deny-button-background-color:    var(--u-danger-500);
    --swal2-deny-button-border-radius:       var(--u-r-md);

    /* ---- 焦点环统一（铁律 R4）与状态提示 ---- */
    --swal2-outline:                       var(--u-focus-ring);
    --swal2-close-button-color:            var(--u-text-tertiary);
    --swal2-validation-message-background: var(--u-danger-50);
    --swal2-validation-message-color:      var(--u-danger-700);
    --swal2-footer-border-color:           var(--u-divider);
    --swal2-actions-margin:                var(--u-sp-5) auto 0;
}

/* ---- 定位加固：显式钉死「固定全屏 + grid」----
   仅重申组件既有定位，不改动其 grid 布局逻辑：
   弹窗最终落在中心由组件自身 div:where(.swal2-container).swal2-center > .swal2-popup
   的 place-self: center center 决定，此处刻意不写 align-items/justify-items，
   避免与 place-self 产生歧义。 */
.swal2-container {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
}

/* ---- 弹窗本体：中性阴影分层 ---- */
.swal2-container .swal2-popup {
    font-family: var(--u-font-family);
    font-size: var(--u-fs-body);
    box-shadow: var(--u-sh-lg);
}

.swal2-container .swal2-title {
    font-size: var(--u-fs-title);        /* 18px，与区块标题同级 */
    font-weight: var(--u-fw-semibold);
    line-height: var(--u-lh-tight);
    color: var(--u-text);
}

.swal2-container .swal2-html-container {
    font-size: var(--u-fs-body);
    line-height: var(--u-lh-base);
    color: var(--u-text-body);
}

/* ---- 按钮尺度对齐 project 按钮规范（36px / 14px / 500）---- */
.swal2-container .swal2-styled {
    min-height: var(--u-btn-h);
    padding: 6px 16px;
    font-size: var(--u-fs-body);
    font-weight: var(--u-fw-medium);
    transition: background-color var(--u-dur) var(--u-ease),
                box-shadow var(--u-dur) var(--u-ease);
}

.swal2-container .swal2-styled.swal2-confirm          { background-color: var(--u-primary-500); }
.swal2-container .swal2-styled.swal2-confirm:hover    { background-color: var(--u-primary-600); }
.swal2-container .swal2-styled.swal2-confirm:active   { background-color: var(--u-primary-700); }

.swal2-container .swal2-styled.swal2-cancel           { background-color: var(--u-n500); }
.swal2-container .swal2-styled.swal2-cancel:hover     { background-color: var(--u-n600); }
.swal2-container .swal2-styled.swal2-cancel:active    { background-color: var(--u-n700); }

.swal2-container .swal2-styled.swal2-deny             { background-color: var(--u-danger-500); }
.swal2-container .swal2-styled.swal2-deny:hover       { background-color: var(--u-danger-600); }
.swal2-container .swal2-styled.swal2-deny:active      { background-color: var(--u-danger-700); }

.swal2-container .swal2-styled:focus-visible {
    box-shadow: var(--u-focus-ring);
}

/* ---- 输入控件：与 BS5 控件等高、同字号 ---- */
.swal2-container .swal2-input,
.swal2-container .swal2-select,
.swal2-container .swal2-textarea {
    margin: 0 0 var(--u-sp-3);
    font-size: var(--u-fs-body-lg);
    color: var(--u-text-body);
}

.swal2-container .swal2-input,
.swal2-container .swal2-select {
    min-height: var(--u-control-h);
}

/* ==========================================================================
   ⑪ 登录页（/admin/login）
   --------------------------------------------------------------------------
   独立页，不继承 admin.layouts.app，故在此提供完整基线。

   背景全部由 CSS 绘制，不引入任何图片、不使用渐变：
     ① 蓝本网格 —— 内联 SVG data-URI 描线（1px 直线，非渐变函数），
        取 #cbd5e1（= --u-n300），衬「任务／组织架构」的业务语义
     ② 几何色块 —— 实心圆 / 描边圆环 / 旋转方块三枚，颜色全部来自主色令牌，
        因此「样式设置」改主色后背景同步换色，不会出现两套色系

   卡片与控件复用第③④节的通用基线，本段只补充登录页专有布局。
   ========================================================================== */

.u-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;          /* 移动端地址栏收起时不产生跳动 */
    padding: var(--u-sp-8) var(--u-sp-4);
    overflow: hidden;
    background-color: var(--u-n100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M64 0H0v64' fill='none' stroke='%23cbd5e1' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 64px 64px;
}

/* ---- 几何色块层（纯装饰，不拦截指针事件，读屏忽略）---- */
.u-login__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.u-login__deco::before,
.u-login__deco::after {
    content: "";
    position: absolute;
    display: block;
    border-radius: var(--u-r-pill);
}

/* 左上：实心大圆（主色最浅档） */
.u-login__deco::before {
    top: -180px;
    left: -140px;
    width: 480px;
    height: 480px;
    background-color: var(--u-primary-100);
    opacity: 0.7;
}

/* 右下：描边圆环（主色 200 档，只留线不留底，避免压住卡片） */
.u-login__deco::after {
    right: -130px;
    bottom: -170px;
    width: 420px;
    height: 420px;
    border: 2px solid var(--u-primary-200);
}

/* 右上：45° 旋转方块，打破两枚圆形的对称 */
.u-login__deco span {
    position: absolute;
    top: 16%;
    right: 14%;
    display: block;
    width: 96px;
    height: 96px;
    background-color: var(--u-primary-200);
    border-radius: var(--u-r-lg);
    transform: rotate(45deg);
    opacity: 0.55;
}

/* ---- 登录卡片 ---- */
.u-login-card {
    position: relative;          /* 压在装饰层之上 */
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: var(--u-sp-10) var(--u-sp-8) var(--u-sp-8);
    background-color: var(--u-bg-card);
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-xl);
    box-shadow: var(--u-sh-lg);
}

/* ---- 品牌区 ---- */
.u-login__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--u-sp-5);
    background-color: var(--u-primary-50);
    border-radius: var(--u-r-lg);
    color: var(--u-primary-700);
    font-size: var(--u-fs-h1);
    line-height: 1;
}

.u-login__title {
    margin: 0 0 var(--u-sp-1);
    color: var(--u-text);
    font-size: var(--u-fs-h2);
    font-weight: var(--u-fw-bold);
    line-height: var(--u-lh-tight);
    text-align: center;
}

.u-login__subtitle {
    margin: 0 0 var(--u-sp-8);
    color: var(--u-text-secondary);
    font-size: var(--u-fs-body);
    text-align: center;
}

/* ---- 提示条（错误 / 成功）---- */
.u-login-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--u-sp-2);
    padding: var(--u-sp-3) var(--u-sp-4);
    margin-bottom: var(--u-sp-5);
    border: 1px solid transparent;
    border-radius: var(--u-r-md);
    font-size: var(--u-fs-body);
    line-height: var(--u-lh-base);
}

.u-login-alert > i {
    flex: none;
    margin-top: 1px;             /* 与首行文字基线对齐 */
    font-size: var(--u-fs-body-lg);
}

.u-login-alert--danger {
    background-color: var(--u-danger-50);
    border-color: var(--u-danger-100);
    color: var(--u-danger-700);
}

.u-login-alert--success {
    background-color: var(--u-success-50);
    border-color: var(--u-success-100);
    color: var(--u-success-700);
}

/* ---- 表单项 ---- */
.u-login__field {
    margin-bottom: var(--u-sp-5);
}

/* 左侧图标 + 输入框的定位容器 */
.u-login__control {
    position: relative;
    display: flex;
    align-items: center;
}

.u-login__control > .bi {
    position: absolute;
    left: var(--u-sp-3);
    color: var(--u-text-secondary);
    font-size: var(--u-fs-body-lg);
    pointer-events: none;
    transition: color var(--u-dur) var(--u-ease);
}

/* 聚焦时图标跟随主色，强化「当前正在编辑哪一项」 */
.u-login__control:focus-within > .bi {
    color: var(--u-primary-600);
}

.u-login__control .form-control {
    min-height: 44px;            /* 比通用 36px 略高：登录页输入项少，放大更易点 */
    padding-left: var(--u-sp-10);
}

.u-login__control--reveal .form-control {
    padding-right: var(--u-sp-10);
}

/* 密码可见性切换 */
.u-login__reveal {
    position: absolute;
    right: var(--u-sp-1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--u-r-sm);
    background-color: transparent;
    color: var(--u-text-secondary);
    cursor: pointer;
}

.u-login__reveal:hover {
    background-color: var(--u-bg-hover);
    color: var(--u-text-body);
}

.u-login__reveal:focus-visible {
    outline: none;
    box-shadow: var(--u-focus-ring);
}

/* ---- 「记住我」行 ---- */
.u-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-sp-3);
    margin-bottom: var(--u-sp-6);
}

.u-login__remember {
    display: flex;
    align-items: center;
    gap: var(--u-sp-2);
}

.u-login__remember .form-check-input {
    flex: none;
    margin: 0;                   /* BS5 默认 margin-top:.25em，会与图标错位 */
}

.u-login__remember .form-check-label {
    color: var(--u-text-body);
    font-size: var(--u-fs-body);
    cursor: pointer;
}

/* ---- 提交按钮 ---- */
.u-login__submit {
    width: 100%;
    min-height: 44px;
    font-size: var(--u-fs-body-lg);
    font-weight: var(--u-fw-semibold);
}

/* ---- 窄屏 ---- */
@media (max-width: 480px) {
    .u-login {
        padding: var(--u-sp-4);
    }

    .u-login-card {
        padding: var(--u-sp-8) var(--u-sp-5) var(--u-sp-6);
        border-radius: var(--u-r-lg);
    }

    .u-login__deco span {
        display: none;           /* 小屏隐藏装饰方块，避免与卡片重叠 */
    }
}