/* ============================================================================
   Apple 风格外观（public/theme-apple.css）—— v2.7，2026-09-17
   ----------------------------------------------------------------------------
   怎么生效：<html data-theme="apple">。由「系统设置 → 外观」切换，选择记在
   浏览器的 localStorage（键 cenione_ui_theme），index.html 头部有一小段抢先脚本
   在首屏渲染前就把属性打上，避免「先画出默认色、再闪一下变苹果」。

   为什么整份文件都带 html[data-theme="apple"] 前缀：
     它是**叠加层**，不是替换层。styles.css 一行都不改，只在苹果皮肤打开时覆盖
     颜色 / 圆角 / 阴影 / 毛玻璃这些「皮肤级」属性。
     ⚠️ 因此严禁在这里改任何**尺寸**（padding、width、min-width、字号），
        否则 43 列的明细表列宽、`_t/calc-cols.mjs` 的列宽体检、列表页表头锁定
        的高度计算全会跟着漂。这里只改颜色、圆角、阴影、字体族。
   ============================================================================ */

/* ---------- 1. 颜色令牌：把整站的 CSS 变量换掉 ---------- */
html[data-theme="apple"] {
  --bg: #f2f2f7;              /* iOS 系统灰底 */
  --panel: #ffffff;
  --panel-2: #f7f7fa;         /* 表头 / 次级底色 */
  --border: #e6e6eb;          /* 苹果的分隔线很浅，靠留白分隔 */
  --border-2: #d6d6dc;
  --text: #1c1c1e;            /* label */
  --text-2: #3c3c43;          /* secondary label */
  --muted: #8e8e93;           /* tertiary label */
  --brand: #0071e3;           /* Apple 官网蓝（比 iOS 的 #007aff 稳重一点，适合表格） */
  --brand-soft: #e9f3fe;
  --green: #1c8a45;
  --green-soft: #e8f8ee;
  --red: #d70015;             /* iOS systemRed（深色档，保证在浅底上可读） */
  --red-soft: #ffeceb;
  --amber: #b04a00;
  --amber-soft: #fff3e4;
  --purple: #5e5ce6;          /* iOS systemIndigo */
  --purple-soft: #eeeeff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
}

html[data-theme="apple"] body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  letter-spacing: -.005em;
}

/* ---------- 2. 登录页 ---------- */
html[data-theme="apple"] .login-wrap {
  background: radial-gradient(1200px 600px at 20% -10%, #dbeafe 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #ede9fe 0%, transparent 55%),
              #f2f2f7;
}
html[data-theme="apple"] .login-card {
  border-radius: 22px; border-color: rgba(0, 0, 0, .06);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .04);
}
html[data-theme="apple"] .login-brand h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- 3. 外壳：侧栏 / 顶栏（毛玻璃 + 发丝线） ---------- */
html[data-theme="apple"] .sidebar {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid rgba(0, 0, 0, .07);
}
html[data-theme="apple"] .side-brand,
html[data-theme="apple"] .side-foot { border-color: rgba(0, 0, 0, .07); }
html[data-theme="apple"] .side-brand > span { letter-spacing: .04em; }
html[data-theme="apple"] .nav-group {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted);
  text-transform: none;
}
html[data-theme="apple"] .nav-item { border-radius: 10px; padding: 8px 10px; }
html[data-theme="apple"] .nav-item:hover { background: rgba(0, 0, 0, .045); }
html[data-theme="apple"] .nav-item.active {
  background: rgba(0, 113, 227, .12); color: var(--brand); font-weight: 600;
}
html[data-theme="apple"] .avatar {
  background: linear-gradient(180deg, #4aa3ff, #0071e3); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="apple"] .topbar {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
html[data-theme="apple"] .topbar h2 { font-weight: 600; letter-spacing: -.01em; }

/* ---------- 4. 卡片 / 指标块 ---------- */
html[data-theme="apple"] .panel,
html[data-theme="apple"] .kpi {
  border-radius: 18px; border-color: rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}
html[data-theme="apple"] .panel-head { border-color: rgba(0, 0, 0, .06); }
html[data-theme="apple"] .panel-head h3 { font-weight: 600; letter-spacing: -.01em; }
html[data-theme="apple"] .kpi .k-value { font-weight: 600; letter-spacing: -.02em; }
/* ⚠️ 不动 .kpi.accent 的 border-left 宽度：3px 的边框参与盒模型，
   改掉会让所有指标卡错位 3px（列宽是 grid 算出来的）。颜色跟着 --brand 自己变。 */
html[data-theme="apple"] .kpi.clickable:hover { box-shadow: 0 12px 34px rgba(0, 0, 0, .12); }

/* ---------- 5. 按钮 / 输入 ---------- */
html[data-theme="apple"] .btn { border-radius: 10px; border-color: rgba(0, 0, 0, .1); }
html[data-theme="apple"] .btn:hover { border-color: var(--brand); }
html[data-theme="apple"] .btn:active { transform: scale(.975); }
html[data-theme="apple"] .btn-primary {
  background: var(--brand); border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 113, 227, .35);
}
html[data-theme="apple"] .btn-primary:hover { background: #0062c4; border-color: transparent; }
html[data-theme="apple"] .btn-sm { border-radius: 8px; }
html[data-theme="apple"] .input, html[data-theme="apple"] .select, html[data-theme="apple"] .textarea {
  border-radius: 10px; border-color: rgba(0, 0, 0, .1); background: #fbfbfd;
}
html[data-theme="apple"] .input:focus,
html[data-theme="apple"] .select:focus,
html[data-theme="apple"] .textarea:focus {
  background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .16);
}
html[data-theme="apple"] .input[readonly], html[data-theme="apple"] .input:disabled { background: #f2f2f5; }
html[data-theme="apple"] .pw-eye:hover { background: rgba(0, 113, 227, .1); }

/* ---------- 6. 表格（只改颜色，绝不动尺寸） ---------- */
html[data-theme="apple"] table.grid-table th {
  background: #fafafc; font-weight: 600; color: #55555c;
}
html[data-theme="apple"] table.grid-table td { border-bottom-color: #f1f1f4; }
html[data-theme="apple"] table.grid-table tbody tr:nth-child(even) { background: #f8f8fb; }
html[data-theme="apple"] table.grid-table tbody tr:hover { background: #eaf4fe; }
html[data-theme="apple"] table.grid-table tr:has(input[type="checkbox"]:checked) { background: #f2f8ff; }
html[data-theme="apple"] .table-wrap { border-radius: 12px; }
html[data-theme="apple"] .drill .table-wrap { border-color: rgba(0, 0, 0, .07); border-radius: 14px; }

/* ---------- 7. 标签 / 提示条 / 徽标 ---------- */
html[data-theme="apple"] .tag { border-radius: 999px; padding: 1px 9px; border-color: transparent; }
html[data-theme="apple"] .tag.blue { background: var(--brand-soft); border-color: transparent; }
html[data-theme="apple"] .tag.gray { background: #f0f0f4; border-color: transparent; }
html[data-theme="apple"] .perm-note,
html[data-theme="apple"] .inline-tip { border-radius: 12px; }
html[data-theme="apple"] .mask-chip { border-radius: 999px; }

/* ---------- 8. 弹窗 / 抽屉 / toast ---------- */
html[data-theme="apple"] .modal {
  border-radius: 20px; border-color: rgba(0, 0, 0, .06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26), 0 2px 8px rgba(0, 0, 0, .06);
}
html[data-theme="apple"] .modal-head { border-color: rgba(0, 0, 0, .06); }
html[data-theme="apple"] .modal-head h3 { font-weight: 600; letter-spacing: -.01em; }
html[data-theme="apple"] .modal-foot { background: #fafafc; border-color: rgba(0, 0, 0, .06); }
html[data-theme="apple"] .sub-mask .modal,
html[data-theme="apple"] .modal-mask.sub-mask .modal { border-radius: 18px; }
html[data-theme="apple"] .toast {
  border-radius: 999px; padding-left: 20px; padding-right: 20px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
html[data-theme="apple"] .mini-card { border-radius: 20px; }

/* ---------- 9. 明细表里的输入框：只改圆角，不碰内边距（列宽是算出来的） ---------- */
html[data-theme="apple"] table.edit-table input,
html[data-theme="apple"] table.edit-table select { border-radius: 7px; }
html[data-theme="apple"] table.edit-table input:focus,
html[data-theme="apple"] table.edit-table select:focus { box-shadow: 0 0 0 2.5px rgba(0, 113, 227, .14); }
html[data-theme="apple"] table.edit-table th { border-bottom-color: var(--border); }

/* ---------- 10. 滚动条：细、圆、悬停才明显（苹果的悬浮滚动条观感） ---------- */
html[data-theme="apple"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="apple"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="apple"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18); border: 3px solid transparent;
  border-radius: 999px; background-clip: content-box;
}
html[data-theme="apple"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .32); border: 3px solid transparent; background-clip: content-box;
}
html[data-theme="apple"] ::-webkit-scrollbar-corner { background: transparent; }