/* ==========================================================================
   SHUOXU-API 控制台设计系统  (assets/css/app.css)
   适用：用户中心 /user、代理端 /agent、总后台 /admin
   目标：与前台 front.css 同一套视觉语言（细边框、小圆角、零渐变、零大阴影、
        单一主色 + 语义色），并让后台原有 Tailwind 类自动"收敛"到这套语言。

   用法：在页面 </head> 前引入即可，无需改动页面 HTML。
   说明：Tailwind Play CDN 会在运行时把样式插到 <head> 末尾（排在本文件之后），
        所以这里统一用 `html body .xxx`（更高特异性）而非 !important 来覆盖。
   ========================================================================== */

/* ---------- 1. 设计令牌（与 front.css 完全一致） ---------- */
:root {
    --bg:          #f4f5f7;
    --surface:     #ffffff;
    --surface-2:   #fafbfc;

    --ink:         #0e1420;
    --ink-2:       #4a5361;
    --ink-3:       #7d8794;
    --ink-4:       #a8b0bb;

    --line:        #e2e5ea;
    --line-2:      #eef0f3;

    --brand:       #1449c4;
    --brand-hover: #10399c;
    --brand-soft:  #eef2fd;
    --brand-line:  #c7d5f7;

    --ok:          #06693f;   --ok-soft:     #eaf7f0;
    --warn:        #9a5b00;   --warn-soft:   #fdf4e3;
    --danger:      #a92216;   --danger-soft: #fdeeec;

    --radius:      6px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    --side-w:      236px;
    --topbar-h:    52px;
}

/* ---------- 2. 全局基底 ---------- */
html body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
html body button,
html body input,
html body select,
html body textarea { font-family: inherit; }

/* 关掉 admin.css 里 `* { transition: all }` 带来的整体抖动；
   同时把 * { font-family: 'Inter' } 之类的全局字体声明拉回系统字体栈 */
html body * { transition: none; font-family: inherit; }
html body a,
html body button,
html body .app-side a { transition: background-color .12s, border-color .12s, color .12s; }

/* ---------- 3. 收敛 Tailwind 的"AI 风"装饰类 ---------- */
/* 大圆角 → 6px */
html body .rounded-lg,
html body .rounded-xl,
html body .rounded-2xl,
html body .rounded-3xl { border-radius: var(--radius); }

/* 阴影 → 去掉，用细边框表达层级 */
html body .shadow,
html body .shadow-sm,
html body .shadow-md,
html body .shadow-lg,
html body .shadow-xl,
html body .shadow-2xl,
html body .shadow-none { box-shadow: none; }
html body .hover\:shadow:hover,
html body .hover\:shadow-md:hover,
html body .hover\:shadow-lg:hover,
html body .hover\:shadow-xl:hover { box-shadow: none; }

/* ---------- 渐变 → 纯色 ----------
   关键：必须先补 background-color 再去掉 background-image。
   只列出常用蓝紫色会让 from-green / from-yellow 等语义色块变成透明（内容看不见），
   所以这里先用属性选择器给「所有渐变块」统一兜底色，再按语义色逐条覆盖。 */
html body [class*="bg-gradient"] {
    background-image: none;
    background-color: var(--brand);          /* 兜底：任何渐变块都不会透明 */
}
/* 语义色保留（放在兜底之后才能覆盖它） */
html body [class*="from-green"],
html body [class*="from-emerald"],
html body [class*="from-lime"],
html body [class*="from-teal"] { background-color: var(--ok); }

html body [class*="from-red"],
html body [class*="from-rose"],
html body [class*="from-pink"] { background-color: var(--danger); }

html body [class*="from-yellow"],
html body [class*="from-amber"],
html body [class*="from-orange"] { background-color: var(--warn); }

html body [class*="from-gray"],
html body [class*="from-slate"],
html body [class*="from-zinc"],
html body [class*="from-neutral"] { background-color: #3d4655; }

html body [class*="from-blue"],
html body [class*="from-indigo"],
html body [class*="from-purple"],
html body [class*="from-violet"],
html body [class*="from-sky"],
html body [class*="from-cyan"] { background-color: var(--brand); }

/* 浅色档（50 / 100 / 200）是 Tailwind 的浅底，项目里大量用作「图标容器」。
   上面统一刷成主色深底会让里面的深色图标看不见，这里改回浅底。
   必须放在语义色规则之后才能覆盖它们。 */
/* 末尾的 [class] 用来提高特异性：.w-12.h-12 那条图标块规则（半透明 currentColor 底）
   与它特异性相同且位置更靠后，会把这里覆盖掉。 */
/* ⚠️ -50 必须带「词边界」，不能写成 [class*="-50"]：
   -50 是 -500 的子串，而 from-xxx-500 / -600 / -700 是「深色渐变底 + 白字」，
   被误刷成浅底后白字就看不见了（总后台仪表盘那三张统计卡就是这样消失的）。
   class 属性以空格分隔，所以用 "-50 "（后面紧跟空格）和 "-50" 结尾（后者用 $=）
   两个边界来精确匹配，-500/-600 都不会命中。 */
html body [class*="bg-gradient"][class*="-50 "][class],
html body [class*="bg-gradient"][class$="-50"][class],
html body [class*="bg-gradient"][class*="-100"][class],
html body [class*="bg-gradient"][class*="-200"][class] { background-color: #eef1f6; }
/* 渐变色块里的文字（text-white / text-white\/80）在纯色底上仍可读，无需处理 */

/* 悬停上浮 → 取消（克制） */
html body .stat-card:hover,
html body .hover-card:hover,
html body .hover\:-translate-y-1:hover,
html body .hover\:-translate-y-2:hover { transform: none; }

/* 紫色 / 靛蓝 → 主色蓝 */
html body .text-purple-500,
html body .text-purple-600,
html body .text-purple-700,
html body .text-indigo-500,
html body .text-indigo-600,
html body .text-indigo-700 { color: var(--brand); }
html body .bg-purple-500,
html body .bg-purple-600,
html body .bg-indigo-500,
html body .bg-indigo-600 { background-color: var(--brand); }
html body .bg-purple-100,
html body .bg-indigo-100,
html body .bg-purple-50,
html body .bg-indigo-50 { background-color: var(--brand-soft); }
html body .border-purple-500,
html body .border-indigo-500,
html body .border-b-purple-500 { border-color: var(--brand); }

/* 语义色统一到系统色板 */
html body .text-blue-600,
html body .text-blue-700 { color: var(--brand); }
html body .text-green-600,
html body .text-green-700 { color: var(--ok); }
html body .text-yellow-600,
html body .text-yellow-700,
html body .text-amber-600 { color: var(--warn); }
html body .text-red-600,
html body .text-red-700 { color: var(--danger); }
html body .bg-blue-600,
html body .bg-blue-700 { background-color: var(--brand); }
html body .bg-green-600,
html body .bg-green-700 { background-color: var(--ok); }
html body .bg-yellow-500,
html body .bg-yellow-600,
html body .bg-amber-500 { background-color: var(--warn); }
html body .bg-red-600,
html body .bg-red-700 { background-color: var(--danger); }
html body .bg-red-500 { background-color: var(--danger); }

/* 中性灰阶对齐设计系统。
   注意：页面底色常写在 <body> 自身上（如 <body class="bg-gray-50">），
   必须用 body.xxx 才能命中，写成 body .xxx 只能命中 body 的后代 */
html body.bg-gray-50,
html body.bg-gray-100,
html body .bg-gray-50  { background-color: var(--bg); }
html body .bg-gray-100 { background-color: var(--surface-2); }
html body .bg-gray-200 { background-color: var(--line); }
html body .text-gray-900,
html body .text-gray-800 { color: var(--ink); }
html body .text-gray-700 { color: var(--ink-2); }
html body .text-gray-500,
html body .text-gray-600 { color: var(--ink-3); }
html body .text-gray-400 { color: var(--ink-4); }
html body .border-gray-200,
html body .border-gray-300 { border-color: var(--line); }

/* 统计卡里的彩色圆形图标底 → 方形弱底。
   底色跟随上下文文字色（深底页面自动变浅，避免看不清），白底卡片内才用主色浅底 */
html body .w-12.h-12,
html body .w-10.h-10,
html body .w-14.h-14,
html body .w-16.h-16 {
    border-radius: var(--radius);
    background-color: rgba(127, 127, 127, .12);                          /* 不支持 color-mix 时的回退 */
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}
html body .w-12.h-12 > i,
html body .w-10.h-10 > i,
html body .w-14.h-14 > i,
html body .w-16.h-16 > i { color: inherit; }
html body .bg-white .w-12.h-12,
html body .bg-white .w-10.h-10,
html body .bg-white .w-14.h-14,
html body .bg-white .w-16.h-16 { background-color: var(--brand-soft); }
html body .bg-white .w-12.h-12 > i,
html body .bg-white .w-10.h-10 > i,
html body .bg-white .w-14.h-14 > i,
html body .bg-white .w-16.h-16 > i { color: var(--brand); }

/* 左侧彩色粗条 → 3px 细条 */
html body .border-l-4 { border-left-width: 3px; }
html body .border-l-4.border-blue-500,
html body .border-l-4.border-purple-500,
html body .border-l-4.border-indigo-500 { border-left-color: var(--brand); }
html body .border-l-4.border-green-500  { border-left-color: var(--ok); }
html body .border-l-4.border-yellow-500,
html body .border-l-4.border-amber-500  { border-left-color: var(--warn); }
html body .border-l-4.border-red-500    { border-left-color: var(--danger); }

/* 白卡统一细边框（替代被去掉的阴影） */
html body .bg-white.rounded,
html body .bg-white.rounded-lg,
html body .bg-white.rounded-xl,
html body .bg-white.shadow,
html body .bg-white.shadow-sm,
html body .bg-white.shadow-md {
    border: 1px solid var(--line);
}

/* ---------- 4. 表格 ---------- */
html body table { border-collapse: collapse; }
html body table th {
    font-weight: 600;
    color: var(--ink-3);
    font-size: 12.5px;
    letter-spacing: .2px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
html body table td { border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
html body table tbody tr:hover { background: var(--surface-2); }

/* ---------- 5. 表单 ---------- */
html body input,
html body select,
html body textarea {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    outline: none;
}
html body input:focus,
html body select:focus,
html body textarea:focus { border-color: var(--brand); }
html body input::placeholder,
html body textarea::placeholder { color: var(--ink-4); }
html body select { padding-right: 28px; }

/* ---------- 6. 控制台外壳（侧边栏 / 抽屉） ---------- */
/* 三端历史外壳写法不一致（admin 用 <div class="flex h-screen">、agent 用 <body class="flex">、
   user 用 <div class="flex flex-col lg:flex-row min-h-screen">，还有个别页面没有外层容器）。
   侧边栏是 flex: 0 0 236px，一旦放进非横向 flex 容器就会错行/塌缩，
   所以这里统一兜底，不必逐个改页面。 */
/* 只作用于「侧边栏的直接容器」。不要把 body 本身改成 flex——
   页面上外壳之外还有弹窗、提示条等元素，会被横向挤进来把主区压窄 */
html body div:has(> .app-side) {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}
/* 内容区：user.css 给 .main-content 加了 min-height:100vh + overflow-y:auto，
   与外壳叠一层会出第二个滚动条，这里收敛掉 */
html body .main-content { flex: 1 1 auto; min-height: 0; overflow: visible; }

.app-side {
    width: var(--side-w);
    flex: 0 0 var(--side-w);
    background: #0e1420;            /* 与前台页脚同一深色 */
    color: #b9c2cf;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-right: 1px solid #1b2434;
}
.app-side-brand {
    padding: 14px 16px;
    border-bottom: 1px solid #1b2434;
}
.app-side-brand .name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-side-brand .sub { font-size: 13px; color: #8b95a5; margin-top: 4px; }
.app-side-brand .user { font-size: 13px; color: #8b95a5; margin-top: 8px; }

.app-side-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 8px; }
.app-side-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 4px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #c3cbd6;
    border-left: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.app-side-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-side-nav a.is-active {
    background: rgba(20, 73, 196, .16);
    color: #fff;
    border-left-color: var(--brand);
    font-weight: 500;
}
.app-side-nav a i { width: 18px; text-align: center; font-size: 15px; flex: 0 0 18px; }
.app-side-nav .count {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.app-side-foot {
    padding: 12px 16px;
    border-top: 1px solid #1b2434;
    font-size: 12px;
    color: #8b95a5;
}
.app-side-foot a { color: #c3cbd6; display: flex; align-items: center; gap: 9px; font-size: 14px; }
.app-side-foot a:hover { color: #fff; }

/* 移动端抽屉：按钮 + 遮罩，默认隐藏 */
.app-side-toggle,
.app-side-mask { display: none; }

/* ---------- 6b. 页面内 <style> 写死的效果（登录页等）---------- */
/* 这些页面是「深底白字」整体设计，底色必须保持深色，只去掉渐变与毛玻璃 */
html body.gradient-bg,
html body .gradient-bg {
    background-image: none;
    background-color: #0e1420;
    color: #e6eaf0;          /* 深底页面统一浅色文字，保证对比度 */
}
html body .glass-effect {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* 登录卡片：白底 + 细边框，替代被去掉的大阴影 */
html body .login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: none;
}
/* 社交按钮 hover 放大、价格演示块渐变 */
html body .social-btn:hover { transform: none; }
html body .price-demo { background-image: none; background-color: var(--brand); }

/* ---------- 7. 自适应 ---------- */
/* 1024 以下：侧边栏改为抽屉 */
@media (max-width: 1024px) {
    .app-side {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 70;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
    }
    .app-side.is-open { transform: translateX(0); }

    .app-side-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 12px;
        top: 12px;
        z-index: 80;
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink-2);
        cursor: pointer;
    }
    .app-side-mask {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: rgba(14, 20, 32, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }
    .app-side-mask.is-open { opacity: 1; pointer-events: auto; }

    /* 抽屉打开时给内容区留出顶部空间，避免被按钮压住标题 */
    .app-side + * , .flex-1 { padding-top: 0; }
}

/* 768 以下：内边距收紧、字号下调 */
@media (max-width: 768px) {
    html body .p-6, html body .p-8 { padding: 14px; }
    html body .p-4, html body .p-5 { padding: 12px; }
    html body .px-6, html body .px-8 { padding-left: 14px; padding-right: 14px; }
    html body .text-2xl { font-size: 19px; }
    html body .text-3xl { font-size: 21px; }
    html body .text-xl  { font-size: 16px; }
    html body .grid-cols-2,
    html body .grid-cols-3,
    html body .grid-cols-4,
    html body .grid-cols-5 { grid-template-columns: 1fr; }
}

/* 表格横向滚动兜底：表格的父容器若没写 overflow-x-auto，这里补上 */
.app-side ~ * div:has(> table),
.flex-1 div:has(> table) { overflow-x: auto; }
html body table { min-width: 560px; }
html body .overflow-x-auto { overflow-x: auto; }

/* 打印 */
@media print {
    .app-side, .app-side-toggle, .app-side-mask { display: none !important; }
}