/* ============================================================================
 *  ui.css —— 组件层 / 治理层（R130）
 *
 *  为什么单独一个文件：
 *    全站在用一份 475 行的 style.css，但真正决定长相的 1259 处样式是写在
 *    app.js / admin.js 的内联 style 里的，散落成灾、无法统一改。
 *    本文件是「治理层」——在不改动那 1259 处的前提下，用级联 + 少量必要
 *    的 !important 把全站观感拉齐；同时提供一套标准组件类，新写的代码用它。
 *
 *  三层职责边界：
 *    style.css  → 基础 Reset、老组件（不动）
 *    ui.css     → 字号阶梯 / 层级 / 表单字段 / 注释折叠 / 溢出兜底 / 手机适配
 *    内联 style → 仅允许布局类（margin/flex/width），视觉类一律走 class
 *
 *  回滚方式：删掉 index.html / admin.html 里的 ui.css 引用即可，业务不受影响。
 * ========================================================================== */

/* ---------- 0. 设计 Tokens：字号阶梯 / 语义色 / 间距 ---------- */
:root {
  /* 字号阶梯：原来四级全挤在 12–15px，肉眼分不出层级，这里硬性拉开 */
  --fs-h1: 20px;      /* 页面 / 弹窗主标题 */
  --fs-h2: 16.5px;    /* 卡片标题 */
  --fs-h3: 15px;      /* 区块小标题 */
  --fs-body: 14px;    /* 正文 */
  --fs-label: 13px;   /* 字段标签 */
  --fs-hint: 12px;    /* 注释说明 */

  /* 文字语义色：标签从浅灰提深，注释从灰再淡一档，拉开主次 */
  --c-label: #565049;
  --c-hint: #918a80;
  --c-hint-hover: #6b6459;

  /* 间距：统一到 4 的倍数，杜绝随手 7px / 11px */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 20px;

  --radius-field: 7px;
}

/* ---------- 1. 层级：把主标题 / 小标题从正文里拽出来 ---------- */

/* 卡片标题：原 15px / 600，跟 14px 正文只差 1px —— 现在拉开到 16.5px / 700 */
.card-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
  margin-bottom: var(--sp-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* 卡片自身也被折叠时，分隔线不该留着 */
.card.foldable.collapsed .card-title { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* 区块小标题：原 13px 反而比卡片标题还小 —— 提到 15px 并加色块前导 */
.sec-title {
  font-size: var(--fs-h3) !important;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}
.sec-title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--primary);
}
/* 区块是第一个元素时不该有上间距 */
.sec-block:first-child .sec-title:first-child,
.card > .sec-title:first-child { margin-top: 0; }

/* 弹窗主标题 */
.modal-title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: .5px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.modal-cust-head .modal-title { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* 表单分区标题（客户建档那套）与新 schedule 对齐 */
.form-sec-t { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }

/* ---------- 2. 表单字段：标签提深、控件自适应、注释可折叠 ---------- */

/* 字段标签：原来是 12px 浅灰，跟占位符几乎同色 —— 提到 13px 深灰
   （App/Admin 里有 80 处 <label style="font-size:..."> 内联写法，必须 !important 才能压住） */
.form-item label,
form label,
.field > label {
  font-size: var(--fs-label) !important;
  color: var(--c-label) !important;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 5px;
}

/* 标准字段组件（新代码用它）：标签 + 控件 + 说明 三件套 */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > input,
.field > select,
.field > textarea { width: 100%; min-width: 0; }

/* 表单行内的子项允许收缩，防止 min-width 把 flex 行撑破 */
.form-item { min-width: 0; }
.form-row > * { min-width: 0; }
.plan-group-head > * { min-width: 0; }

/* ---------- 3. 注释说明：从「一行行常驻小字」变成「按需展开」 ----------
   样式配合 ui.js —— 脚本会给散落各处的灰字打上 .hint 类，
   再把同一容器内连续两条以上合并成 .hint-fold 折叠条。 */

.hint {
  font-size: var(--fs-hint);
  color: var(--c-hint);
  line-height: 1.65;
  margin-top: 5px;
}

/* 折叠条本体：用原生 details，无需 JS 管状态 */
.hint-fold {
  margin-top: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: #fbf9f5;
  overflow: hidden;
}
.hint-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 11px;
  font-size: var(--fs-hint);
  color: var(--c-hint);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: color .15s, background .15s;
}
.hint-fold > summary::-webkit-details-marker { display: none; }
.hint-fold > summary:hover { color: var(--c-hint-hover); background: #f6f2ea; }
.hint-fold > summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s;
}
.hint-fold[open] > summary::before { transform: rotate(90deg); }
.hint-fold > summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-left: auto;
  background:
    radial-gradient(circle at 50% 50%, currentColor 0.8px, transparent 0.9px) center 3px / 14px 3px no-repeat,
    linear-gradient(currentColor, currentColor) center 6.5px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center 9px / 8px 1px no-repeat;
  opacity: .55;
}
.hint-fold-body {
  padding: 2px 11px 10px 11px;
  border-top: 1px dashed var(--border);
}
.hint-fold-body > * { margin-top: 6px; }
.hint-fold-body > *:first-child { margin-top: 8px; }

/* ---------- 4. 溢出兜底：治那些写死了 px 宽度的输入框 ----------
    全站有 91 处 style="width:150px" 之类的硬编码。
    这里不删它们，而是加 max-width 约束 —— width 与 max-width 是两个不同的
    属性，内联没声明 max-width，所以这里不需要 !important 就能生效：
    容器够宽时保持原设计宽度，容器不够时自动收，永不撑破。 */

input, select, textarea { max-width: 100%; }
.filter-bar input, .filter-bar select { max-width: 100%; }
.up-item .up-file { max-width: 100%; }

/* 长文本：地址 / 备注 / AI 生成内容，不允许顶破容器 */
.card, .modal, td, .sec-block { overflow-wrap: break-word; word-break: break-word; }

/* 表格横向滚动容器（新写代码用；老表格由 ui.js 自动补一层） */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--radius-field);
}
.tbl-scroll > table { width: 100%; }

/* 图片永远不许超出容器 */
img { max-width: 100%; height: auto; }

/* ---------- 5. 手机 / 窄屏整体适配 ---------- */
@media (max-width: 720px) {
  /* 画布留白收窄，把空间还给内容 */
  .container { padding: 12px 12px 40px; }
  .topbar { padding: 0 12px; height: 52px; }
  .brand { font-size: 16px; }
  .store-tag { display: none; }
  .nav-tabs { padding: 8px 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-tab { padding: 9px 13px; white-space: nowrap; }

  /* 卡片留白同步收窄 */
  .card { padding: 13px 13px; margin-bottom: 12px; }
  .card-title { font-size: 16px; padding-bottom: 9px; margin-bottom: 12px; }

  /* 表单：一律单列铺满 —— 原来的 min-width:160px 在窄屏必然撑破 */
  .form-item input, .form-item select, .form-item textarea,
  .form-row input, .form-row select, .form-row textarea,
  .filter-bar input, .filter-bar select {
    min-width: 0 !important;
    width: 100% !important;
  }
  .form-item, .form-row > * { width: 100%; min-width: 0; }
  .form-row { gap: 12px; }
  .filter-bar { gap: 8px; }
  .filter-bar > * { flex: 1 1 100%; }

  /* iOS 上 input 字号小于 16px 会触发页面自动放大 —— 必须顶上去 */
  input, select, textarea {
    font-size: 16px !important;
    padding: 9px 11px;
  }
  textarea { min-height: 80px; line-height: 1.6; }

  /* 触摸目标放大到 40px 以上 */
  .btn { padding: 10px 15px; min-height: 40px; font-size: 14px; }
  .btn-sm { min-height: 34px; padding: 6px 11px; }
  .link-btn { padding: 4px 2px; }
  .up-btn { width: 100%; justify-content: center; }

  /* 表格：允许横向滑动，不再压缩到看不清 */
  th, td { padding: 9px 10px; font-size: 13px; }
  .mini-table input, .mini-table select { font-size: 16px !important; min-width: 0 !important; }

  /* 弹窗转全屏抽屉，操作条吸底 */
  .modal-mask { padding: 0; align-items: stretch; }
  .modal, .modal-wide, .modal-sm, .modal-cust {
    max-width: 100% !important;
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    padding: 16px 14px 20px;
  }
  .modal-actions, .modal-cust-foot {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 12px;
    margin-top: 16px;
    box-shadow: 0 -3px 12px rgba(45, 42, 38, .07);
  }
  .modal-actions .btn { flex: 1; min-width: 0; }

  /* 多列栅格全部降为单列 */
  .grid-2, .form-grid, .ov-grid, .ctype-pick, .plan-slots, .scheme-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-num { font-size: 22px; }

  /* 提示浮层不越界 */
  .notif-panel { width: calc(100vw - 24px); max-width: none; }
  .toast { max-width: calc(100vw - 32px); text-align: center; }
}

/* 超小屏：统计卡改单列 */
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* 触屏：禁用 300ms 点击延迟时代的悬停态，避免点完不消失 */
@media (hover: none) {
  tr:hover td { background: transparent; }
  .card.foldable .card-title:hover,
  .sec-block.foldable .sec-title:hover { color: inherit; }
  .up-btn:hover { transform: none; }
}

/* ============================================================================
 *  R148：样片看图器（public/js/libimg.js）
 *  看图这件事之前是 window.open(原图)：点了之后有些浏览器直接下载，看着像误触。
 *  现在在当前页开大图，左右翻页稳、滚轮能翻、「下载」是单独一个按钮 —— 看归看、存归存。
 * ========================================================================== */
.libimg-mask {
  background: rgba(18, 16, 14, .93) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 14px !important;
  overflow: hidden !important;
}
.libimg-box {
  display: flex; flex-direction: column;
  width: 100%; max-width: 1180px; height: calc(100vh - 40px);
  background: transparent;
}
.libimg-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 10px; color: #fff; flex: none;
}
.libimg-title { font-size: 14px; font-weight: 600; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libimg-count { font-size: 12px; color: rgba(255, 255, 255, .68); }
.libimg-bar .btn { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .28); }
.libimg-bar .btn:hover { background: rgba(255, 255, 255, .24); }
.libimg-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.libimg-stage img#libimg-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
  background: #1b1916; box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.libimg-stage img#libimg-img.full {
  max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out;
}
.libimg-load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .7); font-size: 13px; pointer-events: none;
}
.libimg-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 62px; line-height: 60px; text-align: center;
  font-size: 30px; color: #fff; cursor: pointer; border: none;
  background: rgba(0, 0, 0, .32); border-radius: 8px; padding: 0;
}
.libimg-nav:hover { background: rgba(0, 0, 0, .55); }
.libimg-prev { left: 6px; }
.libimg-next { right: 6px; }
.libimg-thumbs {
  flex: none; display: flex; gap: 6px; overflow-x: auto;
  padding: 12px 0 2px; scrollbar-width: thin;
}
.libimg-thumbs img {
  width: 62px; height: 62px; object-fit: cover; flex: none;
  border-radius: 6px; border: 2px solid transparent; cursor: pointer; opacity: .62;
}
.libimg-thumbs img:hover { opacity: .9; }
.libimg-thumbs img.on { border-color: var(--primary, #B0653A); opacity: 1; }
/* 手机：箭头改成贴边小一点、缩略图条收紧，别抢画面 */
@media (max-width: 720px) {
  .libimg-mask { padding: 8px 6px !important; }
  .libimg-box { height: calc(100vh - 16px); }
  .libimg-nav { width: 32px; height: 48px; line-height: 46px; font-size: 24px; }
  .libimg-thumbs img { width: 48px; height: 48px; }
  .libimg-title { max-width: 34%; }
}