/* =========================================================
   PHP 手机号管理系统 · 全局样式表（设计 token + 组件层）

   文件职责
   ---------------------------------------------------------
   ① :root        全局设计 token（颜色/字体/间距/圆角/阴影/布局）
                   —— 全站唯一色源，所有页面与工具类都引用这里的变量。
   ② 组件层        卡片、按钮、表单、表格、徽章、Tabs、Modal、Toast 等。
   ③ 响应式层      断点：>=1440 大屏 / <=1024 小平板 / <=768 平板竖屏
                   / <=640 手机 / <=480 小屏手机（手机优先微调）。

   加载顺序（partials/header.php 中固定，不可调换）
   ---------------------------------------------------------
   assets/tailwind-utils.css   基础重置 + 纯布局工具类（最低优先级）
   assets/fontawesome/...      图标字体
   assets/style.css            本文件（最后加载，配色以此为准）

   约定
   ---------------------------------------------------------
   - 业务配色只改本文件 :root，不要在页面内写死色值。
   - 变量名保持向后兼容：--c-primary / --c-success / --c-danger /
     --c-text-muted 等被页面内联样式引用，禁止改名，只允许调值或新增。
   ========================================================= */

:root {
    /* ---------- 品牌色（单一色源） ---------- */
    --c-primary:         #2563eb;   /* 主色：按钮 / 链接 / 选中态 */
    --c-primary-hover:   #1d4ed8;
    --c-primary-active:  #1e40af;
    --c-primary-soft:    #eff6ff;   /* 主色极浅背景：信息条、表头高亮 */
    --c-primary-border:  #bfdbfe;
    --c-on-primary:      #ffffff;   /* 主色之上的文字 */
    --c-ring:            rgba(37, 99, 235, .28);   /* focus 可见轮廓 */

    /* ---------- 中性色（统一到 slate 阶，与侧边栏 #1e293b 同源） ---------- */
    --c-bg:            #f1f5f9;     /* 页面底色 */
    --c-surface:       #ffffff;     /* 卡片/弹层表面 */
    --c-surface-2:     #f8fafc;     /* 次级表面：表头、输入禁用底 */
    --c-border:        #e2e8f0;
    --c-border-strong: #cbd5e1;
    --c-text:          #1e293b;     /* 正文 */
    --c-text-secondary:#475569;     /* 次要文字 */
    --c-text-muted:    #64748b;     /* 弱化文字（页面内联引用，勿改名） */

    /* ---------- 语义色（成功/危险/警告/信息） ---------- */
    --c-success:       #16a34a;
    --c-success-hover: #15803d;
    --c-success-bg:    #dcfce7;
    --c-success-text:  #14532d;
    --c-success-border:#bbf7d0;

    --c-danger:        #dc2626;
    --c-danger-hover:  #b91c1c;
    --c-danger-bg:     #fee2e2;
    --c-danger-text:   #7f1d1d;
    --c-danger-border: #fecaca;

    --c-warn:          #d97706;
    --c-warn-hover:    #b45309;
    --c-warn-bg:       #fef3c7;
    --c-warn-text:     #78350f;
    --c-warn-border:   #fde68a;

    --c-info-bg:       #dbeafe;
    --c-info-text:     #1e3a8a;
    --c-info-border:   #bfdbfe;

    /* ---------- 侧边栏（深色导航） ---------- */
    --c-sidebar:         #1e293b;
    --c-sidebar-deep:    #172033;   /* 顶部品牌区 / 底部用户区 */
    --c-sidebar-hover:   #334155;
    --c-sidebar-active:  rgba(37, 99, 235, .22);
    --c-sidebar-border:  rgba(148, 163, 184, .18);
    --c-sidebar-text:    #cbd5e1;
    --c-sidebar-muted:   #94a3b8;

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-lg:   16px;
    --text-xl:   18px;
    --text-2xl:  20px;
    --text-3xl:  24px;

    /* ---------- 间距 ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* ---------- 圆角 / 阴影 / 动效 ---------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
    --trans: .18s ease;

    /* ---------- 布局 ---------- */
    --tap-min:    44px;     /* 移动端最小触控目标 */
}

/* =========================================================
   基础层
   ========================================================= */
body {
    color: var(--c-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-primary); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--c-primary-hover); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--c-text); margin: 0 0 var(--space-3); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
p  { margin: var(--space-2) 0; }

code, pre { font-family: var(--font-mono); }
/* 代码块横向滚动，避免长行被强制换行（与 .json-viewer pre 的 pre-wrap 不冲突） */
pre { overflow-x: auto; }

/* 键盘可达性：统一焦点环（鼠标点击不显示） */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* 滚动条（WebKit）：与 slate 中性色一致，避免深色侧边栏里的默认白滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--c-text-muted); }

/* 业务页面容器：限制最大宽度，避免在大屏上拉得过宽 */
.card,
.login-card,
.info-box,
.table-wrap {
    max-width: 100%;
}

/* =========================================================
   Card
   ========================================================= */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
}
.card h1 {
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-2xl);
}

/* =========================================================
   Stats 统计卡
   ========================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.stat-item {
    position: relative;
    background: var(--c-surface);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--trans), transform var(--trans);
}
/* 左侧色条：数值语义一眼可辨（颜色由 .stat-value 的内联色或默认主色决定） */
.stat-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c-primary);
}
.stat-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* 色条跟随数值语义色：页面里用内联 var(--c-success) / var(--c-danger) 标注的统计卡，
   左侧色条自动同色（属性选择器按内联 style 的字面量匹配，故无需改 DOM）。 */
.stat-item:has(.stat-value[style*="--c-success"])::before { background: var(--c-success); }
.stat-item:has(.stat-value[style*="--c-danger"])::before { background: var(--c-danger); }
.stat-item .stat-label {
    color: var(--c-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}
.stat-item .stat-value {
    color: var(--c-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Filter bar 快捷筛选条
   ========================================================= */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.filter-bar a {
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-secondary);
    font-size: var(--text-sm);
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.filter-bar a:hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary-border);
    color: var(--c-primary);
    text-decoration: none;
}
.filter-bar a.active {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}

/* =========================================================
   Table 表格
   ========================================================= */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    background: var(--c-surface);
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-base);
    vertical-align: middle;
}
th {
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    /* 长列表滚动时表头常驻（sticky 在不支持时自动退化为 static） */
    position: sticky;
    top: 0;
    z-index: 1;
}
/* 斑马纹：长表格逐行阅读不串行 */
tbody tr:nth-child(even) { background: var(--c-surface-2); }
tbody tr { transition: background var(--trans); }
tbody tr:hover { background: var(--c-primary-soft); }
tbody tr:last-child td { border-bottom: none; }
td .muted, td.muted { color: var(--c-text-muted); font-size: var(--text-sm); }

/* =========================================================
   Status badges 状态徽章
   ========================================================= */
.badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-success { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); }
.badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger-text);  border-color: var(--c-danger-border); }
.badge-warn    { background: var(--c-warn-bg);    color: var(--c-warn-text);    border-color: var(--c-warn-border); }
.badge-info    { background: var(--c-info-bg);    color: var(--c-info-text);    border-color: var(--c-info-border); }
.badge-muted   { background: var(--c-surface-2);  color: var(--c-text-muted);   border-color: var(--c-border); }

/* =========================================================
   Buttons 按钮体系
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: var(--c-text);
    font-size: var(--text-base);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background var(--trans), border-color var(--trans),
                color var(--trans), box-shadow var(--trans), transform .06s ease;
}
.btn:hover { text-decoration: none; background: var(--c-border); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-ring); }
.btn[disabled], .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* 图标按钮内的图标与文字对齐 */
.btn > i { font-size: 1.05em; line-height: 1; }

.btn-primary {
    background: var(--c-primary);
    color: var(--c-on-primary);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
}
.btn-primary:not([disabled]):hover { background: var(--c-primary-hover); box-shadow: 0 3px 10px rgba(37, 99, 235, .32); }
.btn-primary:active { background: var(--c-primary-active); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--c-ring); }

.btn-success { background: var(--c-success); color: #fff; box-shadow: 0 1px 2px rgba(22, 163, 74, .3); }
.btn-success:not([disabled]):hover { background: var(--c-success-hover); box-shadow: 0 3px 10px rgba(22, 163, 74, .3); }

.btn-danger { background: var(--c-danger); color: #fff; box-shadow: 0 1px 2px rgba(220, 38, 38, .3); }
.btn-danger:not([disabled]):hover { background: var(--c-danger-hover); box-shadow: 0 3px 10px rgba(220, 38, 38, .3); }

.btn-warn { background: var(--c-warn); color: #fff; }
.btn-warn:not([disabled]):hover { background: var(--c-warn-hover); }

/* 描边按钮：次级操作 */
.btn-outline {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text-secondary);
    box-shadow: none;
}
.btn-outline:hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* 无边框文字按钮：低权重操作（清空、取消等） */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
    box-shadow: none;
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-ghost.btn-danger { color: var(--c-danger); background: transparent; }
.btn-ghost.btn-danger:hover { background: var(--c-danger-bg); color: var(--c-danger-hover); }

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 4px var(--space-3); min-height: 30px; font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-5); min-height: 44px; font-size: var(--text-lg); }

/* =========================================================
   Forms 表单
   ========================================================= */
.form-group { margin-bottom: var(--space-4); }
label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--c-text);
    font-weight: 600;
    font-size: var(--text-sm);
}
input[type="text"], input[type="password"], input[type="file"],
input[type="number"], input[type="search"], input[type="date"], textarea, select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--trans), box-shadow var(--trans);
}
input::placeholder, textarea::placeholder { color: var(--c-text-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-ring);
}
input:disabled, textarea:disabled, select:disabled {
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    cursor: not-allowed;
}
textarea {
    min-height: 200px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
}
input[type="file"] {
    padding: var(--space-3);
    border: 2px dashed var(--c-border-strong);
    background: var(--c-surface-2);
    cursor: pointer;
}
input[type="file"]:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-6);
    background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%),
                      linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* =========================================================
   Alerts 提示条
   ========================================================= */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-left-width: 4px;
    font-size: var(--text-base);
}
.alert-success { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); border-left-color: var(--c-success); }
.alert-error   { background: var(--c-danger-bg);  color: var(--c-danger-text);  border-color: var(--c-danger-border);  border-left-color: var(--c-danger); }
.alert-warn    { background: var(--c-warn-bg);    color: var(--c-warn-text);    border-color: var(--c-warn-border);    border-left-color: var(--c-warn); }
.alert-info    { background: var(--c-info-bg);    color: var(--c-info-text);    border-color: var(--c-info-border);    border-left-color: var(--c-primary); }

/* =========================================================
   Pagination 分页
   ========================================================= */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
}
.pagination a, .pagination span {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.pagination a:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    border-color: var(--c-primary);
    text-decoration: none;
}
.pagination .current {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}
.pagination .ellipsis {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}

/* =========================================================
   Login card 登录卡
   ========================================================= */
.login-card {
    width: 100%;
    max-width: 380px;
    margin: var(--space-6) auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* =========================================================
   Modal 弹窗
   ========================================================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .55);
    padding: var(--space-4);
}
.modal.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-content {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 800px;
    box-shadow: var(--shadow-lg);
    margin: auto;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-border);
}
.modal-header h2 { margin: 0; font-size: var(--text-xl); }
.modal-body { padding: var(--space-5); }
.modal .close {
    background: none;
    border: none;
    font-size: var(--text-3xl);
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 0 var(--space-2);
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: background var(--trans), color var(--trans);
}
.modal .close:hover { color: var(--c-danger); background: var(--c-danger-bg); }
.modal .action-buttons { justify-content: flex-end; }

/* =========================================================
   JSON viewer 原始数据查看
   ========================================================= */
.json-viewer {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
.json-viewer pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--c-text-secondary);
}
.json-preview {
    max-width: 320px;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

/* =========================================================
   Info box 接口说明块
   ========================================================= */
.info-box {
    background: var(--c-primary-soft);
    border: 1px solid var(--c-primary-border);
    border-left: 4px solid var(--c-primary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}
.info-box h3 { color: var(--c-primary); margin: 0 0 var(--space-2); }
.info-box code {
    background: var(--c-surface);
    color: var(--c-primary-active);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    border: 1px solid var(--c-primary-border);
}
.info-box pre {
    background: var(--c-surface);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-primary-border);
    margin: var(--space-2) 0;
    overflow-x: auto;
    font-size: var(--text-xs);
    white-space: pre;
    word-wrap: normal;
}

/* =========================================================
   Toast 轻提示
   页面 JS 会写成 class="toast show success|error|info"
   ========================================================= */
.toast {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--c-text);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 2000;
    font-size: var(--text-base);
    max-width: 90vw;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--c-success); }
.toast.error   { background: var(--c-danger); }
.toast.info    { background: var(--c-primary); }

/* =========================================================
   Misc 工具块
   ========================================================= */
.action-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.section-divider {
    border-top: 1px solid var(--c-border);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}
.muted { color: var(--c-text-muted); }
.nowrap { white-space: nowrap; }
/* 表单 / 弹窗下的补充说明文字 */
.help-text {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* 顶部白色操作栏：加一条下边框，避免与内容区同色而糊成一片 */
main header { border-bottom: 1px solid var(--c-border); }

/* =========================================================
   Form stack 表单纵排（密码修改等）
   ========================================================= */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 420px;
}
.form-stack small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

/* =========================================================
   Tabs 选项卡
   ========================================================= */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--c-border);
    margin-bottom: var(--space-5);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;   /* 让激活下边框覆盖 tabs 的底边框 */
    color: var(--c-text-muted);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--trans), border-color var(--trans), background var(--trans);
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color: var(--c-text); background: var(--c-surface-2); }
.tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
    background: transparent;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================
   Filter form 多字段筛选表单
   ========================================================= */
.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
.filter-form .form-group { margin-bottom: 0; }
.filter-form .filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}
.filter-form label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    font-weight: 500;
}
.filter-form input, .filter-form select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    background: var(--c-surface);
}
/* 日期范围两列 */
.filter-form .field-range {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.filter-form .field-range label { margin-bottom: var(--space-1); }
.filter-form .field-range > div > input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
}

/* =========================================================
   Per-page form 每页条数
   ========================================================= */
.per-page-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}
.per-page-form label { margin-bottom: 0; font-weight: 500; }
.per-page-form select {
    width: auto;
    padding: 4px var(--space-6) 4px var(--space-2);
    font-size: var(--text-sm);
}

/* =========================================================
   Bulk bar 批量操作栏
   ========================================================= */
.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.bulk-bar .bulk-info { font-size: var(--text-sm); color: var(--c-text-muted); }
.bulk-bar .bulk-info strong { color: var(--c-primary); font-weight: 600; }
.bulk-bar .bulk-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* =========================================================
   Checkbox 列 / 勾选网格
   ========================================================= */
table .col-check {
    width: 44px;
    text-align: center;
    vertical-align: middle;
}
table .col-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--c-primary);
}
.checkbox-grid, .radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.radio-inline {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.checkbox-grid label, .radio-grid label, .radio-inline label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--c-text);
    cursor: pointer;
    margin-bottom: 0;
}
.checkbox-grid input, .radio-grid input, .radio-inline input {
    width: auto;
    margin: 0;
    accent-color: var(--c-primary);
}

/* =========================================================
   侧边栏配色（作用域限定在 #sidebar，压过布局工具类）
   —— 工具类只提供背景/文字基础值，这里统一为全局 token。
   ========================================================= */
#sidebar {
    background: var(--c-sidebar);
    color: var(--c-sidebar-text);
}
#sidebar .h-\[60px\] { background: var(--c-sidebar-deep); }
#sidebar .border-gray-700 { border-color: var(--c-sidebar-border); }
#sidebar nav a {
    color: var(--c-sidebar-text);
    transition: background var(--trans), color var(--trans), box-shadow var(--trans);
}
#sidebar nav a:hover {
    background: var(--c-sidebar-hover);
    color: #fff;
    text-decoration: none;
}
/* 当前项：主色半透明底 + 左侧指示条 */
#sidebar nav a.bg-primary\/20 {
    background: var(--c-sidebar-active);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--c-primary);
}
#sidebar .text-gray-400 { color: var(--c-sidebar-muted); }
#sidebar .bg-gray-500 { background: var(--c-sidebar-hover); }
#sidebar .hover\:bg-gray-700:hover { background: var(--c-sidebar-hover); }
#sidebar .hover\:text-primary:hover { color: var(--c-primary-hover); }

/* 顶部操作栏中的用户名链接 */
main header .hover\:text-primary:hover { color: var(--c-primary-hover); }

/* 顶栏 header：用 1px 下边框代替投影，边界更干净 */
main > header { box-shadow: none; }

/* 顶栏图标按钮（折叠 / 移动端菜单）：preflight 已去掉 UA 边框，这里补上交互态 */
main > header > div > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text-secondary);
    transition: background var(--trans), color var(--trans);
}
main > header > div > button:hover {
    background: var(--c-surface-2);
    color: var(--c-primary);
}
main > header > div > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--c-ring);
}

/* =========================================================
   响应式
   ========================================================= */

/* ---------- <=1024px 小平板 ---------- */
@media (max-width: 1024px) {
    .card { padding: var(--space-5); }
    .modal-content { max-width: 100%; }
}

/* ---------- <=768px 平板竖屏 / 手机横屏 ---------- */
@media (max-width: 768px) {
    .card { padding: var(--space-4); border-radius: var(--radius-md); }
    .card h1 { margin-bottom: var(--space-4); font-size: var(--text-xl); }
    .modal { padding: 0; }
    .modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .modal-body { padding: var(--space-4); }
    .login-card { margin: var(--space-4) auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    /* 弹窗内按钮在窄屏平分一行 */
    .modal .action-buttons .btn { flex: 1 1 auto; }
}

/* ---------- <=640px 手机：触控目标 + 布局堆叠 ---------- */
@media (max-width: 640px) {
    .filter-form { grid-template-columns: 1fr; }
    .filter-form .field-range {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
    .checkbox-grid, .radio-grid { grid-template-columns: 1fr; }

    .bulk-bar { flex-direction: column; align-items: stretch; }
    .bulk-bar .bulk-actions { flex-direction: column; }
    .bulk-bar .bulk-actions .btn { width: 100%; }

    /* 顶部操作栏按钮组收缩，避免溢出 */
    main header { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
    /* 顶栏图标按钮同步放大到 44px 触控尺寸 */
    main > header > div > button { width: var(--tap-min); height: var(--tap-min); }

    /* 表单类按钮满足 44px 触控标准 */
    .btn { min-height: var(--tap-min); }
    .btn-sm { min-height: 36px; }
    .pagination a, .pagination span {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2);
        font-size: var(--text-sm);
    }
    .modal .close {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    table .col-check input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ---------- <=480px 小屏手机 ---------- */
@media (max-width: 480px) {
    body { font-size: var(--text-sm); }
    h1 { font-size: var(--text-xl); }
    h2 { font-size: var(--text-lg); }

    .card { padding: var(--space-3); }
    .login-card {
        margin: var(--space-3) 0;
        border-radius: var(--radius-md);
        padding: var(--space-4);
    }
    .btn-block { width: 100%; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item .stat-value { font-size: var(--text-2xl); }

    /* 筛选条横向滚动，避免换行 */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-1);
    }
    .filter-bar a { flex-shrink: 0; }

    /* 表格更紧凑 */
    th, td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

    /* 操作按钮垂直堆叠（单列） */
    .action-buttons { flex-direction: column; }
    .action-buttons .btn,
    .action-buttons form { width: 100%; }
    .action-buttons .btn { display: flex; }

    /* 分割线区横向滚动（同 filter-bar 处理方式） */
    .section-divider {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-2);
        font-size: var(--text-sm);
    }
    .section-divider a { white-space: nowrap; flex-shrink: 0; }

    /* Tab 栏横向滚动，避免标签换行 */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab { flex-shrink: 0; min-height: var(--tap-min); justify-content: center; }

    /* Toast 适配小屏：贴底、占满安全宽度、避开刘海手势区 */
    .toast {
        left: var(--space-3);
        right: var(--space-3);
        max-width: none;
        transform: translateY(20px);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
    .toast.show { transform: translateY(0); }
}

/* ---------- 异形屏安全区（iPhone 刘海 / 手势条） ---------- */
@media (max-width: 768px) {
    .modal-body { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 尊重系统"减少动效"偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
    .stat-item:hover { transform: none; }
}

/* ---------- 打印：只保留内容表格 ---------- */
@media print {
    #sidebar, #mask, main header, .filter-bar, .filter-form,
    .pagination, .action-buttons, .bulk-bar, .toast, .modal { display: none !important; }
    body { height: auto; overflow: visible; }
    main, .card { box-shadow: none; border: none; padding: 0; }
    table { min-width: 0; }
}