/* ============================================================
   WashHub · WashPro — 三端统一 Design Token
   Car Wash System (Malaysia) · v1.0 · 2026-10-22
   方法论继承：GD UI PC AstraHex（语义角色 / 色点分组 / 状态色边界）
   品牌色：取自客户参考图（WashPro 蓝）
   ============================================================ */

/* ---------- 1. 色彩 Token ---------- */
:root{
  /* 背景 / 表面 */
  --bg:#F4F7FB;            /* 页面底（冷调浅灰，让白卡有呼吸感） */
  --bg-warm:#F7F9FC;
  --surface:#FFFFFF;       /* 卡片 / 面板 */
  --surface-2:#F8FAFD;     /* 卡内分区 / 表头 */
  --line:#E4EAF2;          /* 描边 */
  --line-2:#EEF2F7;        /* 更轻的分隔 */

  /* 文本（可读性红线：正文近黑，辅助 ≥ #3E4C5A） */
  --ink:#0E1C2E;           /* 主标题 */
  --ink-2:#2C3E54;         /* 正文近黑 */
  --ink-soft:#4A5A6B;      /* 次级说明（红线 ≥ #3E4C5A） */
  --ink-mute:#7A8899;      /* 仅用于 11px 以下元信息 / 占位 */

  /* 品牌主行动（WashPro 蓝） */
  --brand-50:#EFF5FF;
  --brand-100:#DBE8FE;
  --brand-200:#BFD6FE;
  --brand-300:#8CBBFB;
  --brand-400:#5B9BF8;
  --brand:#2B7CF0;         /* 主行动 */
  --brand-600:#1A5FD0;     /* hover / 深色文字底 */
  --brand-700:#164BA5;
  --brand-800:#133B7E;

  /* 状态语义 */
  --ok:#1E8E5A;      --ok-soft:#E3F5EC;      --ok-line:#B9E3CF;
  --warn:#D97706;    --warn-soft:#FDF1DC;    --warn-line:#F3D9A8;
  --danger:#D64545;  --danger-soft:#FCE8E8;  --danger-line:#F5C2C2;
  --info:#2B7CF0;    --info-soft:#E9F2FE;    --info-line:#C3DBFB;

  /* 侧栏（浅色框架，对齐参考图；Option B 深墨蓝见规范文档） */
  --side-bg:#FFFFFF;
  --side-ink:#4A5A6B;
  --side-active:#2B7CF0;
  --side-deep:#0F2A4A;     /* Option B 深墨蓝框架色 */

  /* 业务语义色（替代五行色：只做 ≤10px 识别点 / 浅底标签 / 顶边条） */
  --svc-wash:#3B82C4;      --svc-wash-soft:#E3F0FB;     /* 洗护 Exterior */
  --svc-interior:#8B5CF6;  --svc-interior-soft:#F0EAFE; /* 内饰 Interior */
  --svc-wax:#C9A227;       --svc-wax-soft:#F7F0D6;      /* 镀膜 Wax */
  --svc-detail:#E4572E;    --svc-detail-soft:#FDE9E2;   /* 精洗 Detailing */
  --svc-maint:#4E9F6A;     --svc-maint-soft:#E4F4EA;    /* 保养 Care */
  --svc-addon:#B07B46;     --svc-addon-soft:#F3E9DE;    /* 附加 Add-on */

  /* 洗车位 / 队列状态色 */
  --bay-free:#1E8E5A;
  --bay-busy:#2B7CF0;
  --bay-clean:#D97706;
  --bay-maint:#7A8899;
  --bay-reserved:#8B5CF6;

  /* ---------- 2. 字体 ---------- */
  --f-head:'Sora','Noto Sans SC',sans-serif;      /* 标题 / 大数字 */
  --f-body:'Manrope','Noto Sans SC',sans-serif;   /* 正文 */
  --f-mono:'JetBrains Mono',ui-monospace,monospace;/* 订单号/车牌/金额/时间/编号 */

  --fs-h1:22px;   --fs-h2:17px;   --fs-h3:14.5px;
  --fs-body:13.5px; --fs-sm:12.5px; --fs-xs:11.5px; --fs-xxs:10.5px;

  /* ---------- 3. 间距（4px 基） ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

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

  /* ---------- 5. 阴影（克制） ---------- */
  --shadow-1:0 1px 2px rgba(15,42,74,.05),0 6px 18px -8px rgba(15,42,74,.10);
  --shadow-2:0 12px 34px -12px rgba(15,42,74,.22);
  --shadow-brand:0 6px 16px -6px rgba(43,124,240,.42);

  /* ---------- 6. 动效 ---------- */
  --t-fast:150ms cubic-bezier(.4,0,.2,1);
  --t-normal:260ms cubic-bezier(.4,0,.2,1);
}

/* 深色框架（员工端顶部 Hero / Option B 侧栏） */
.on-dark{
  --ink:#FFFFFF; --ink-2:#E6EEF8; --ink-soft:#A9BED4;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.10);
}

/* ---------- 7. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;
  color:var(--ink-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ---------- 8. 图标尺寸契约（关键）----------
   .ico 由 icons.js 在渲染时挂到宿主元素上（data-i 渲染后即被移除，
   因此尺寸约束必须挂在 .ico 这个稳定 class 上，否则 svg 会按
   viewBox 比例撑破容器）。默认 16×16，行内 style 可覆盖。 */
.ico{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:0 0 auto;vertical-align:middle;line-height:0}
.ico>svg{width:100%;height:100%;display:block;flex:0 0 auto}

/* ---------- 8. 原子元件 ---------- */

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.card-title{font:700 var(--fs-h3)/1.3 var(--f-head);color:var(--ink)}
.card-sub{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px}
.card-bd{padding:18px}
.card-bd.flush{padding:0}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 16px;border-radius:var(--r-sm);
  font:600 var(--fs-sm)/1 var(--f-body);white-space:nowrap;
  transition:all var(--t-fast);
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn-dark{background:var(--brand-800);color:#fff}
.btn-dark:hover{background:var(--brand-700)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--brand-300);color:var(--brand-600);background:var(--brand-50)}
.btn-soft{background:var(--brand-50);color:var(--brand-600)}
.btn-soft:hover{background:var(--brand-100)}
.btn-sm{height:30px;padding:0 12px;font-size:var(--fs-xs);border-radius:var(--r-xs)}
.btn-lg{height:44px;padding:0 22px;font-size:15px;border-radius:var(--r-md)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* 色点（Color-Tags 分组识别，≤10px） */
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block;
  box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* 标签 chip */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-xs);
  font:600 var(--fs-xxs)/1 var(--f-body);white-space:nowrap}
.chip.gray{background:var(--surface-2);color:var(--ink-soft)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.danger{background:var(--danger-soft);color:var(--danger)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.brand{background:var(--brand-50);color:var(--brand-600)}
.chip.outline{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}

/* 状态徽标：白底细描边 + 文字色（不实色填充，与主按钮区分） */
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);font:600 var(--fs-xxs)/1 var(--f-body)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.status.done{color:var(--ok);border-color:var(--ok-line)}
.status.run{color:var(--info);border-color:var(--info-line)}
.status.wait{color:var(--warn);border-color:var(--warn-line)}
.status.stop{color:var(--danger);border-color:var(--danger-line)}
.status.off{color:var(--ink-mute)}

/* 计数 pill */
.cnt{margin-left:auto;font:600 10.5px/16px var(--f-mono);padding:1px 7px;border-radius:7px;
  background:rgba(43,124,240,.09);color:var(--brand-600)}

/* 表格 */
.tbl{font-size:var(--fs-sm)}
.tbl thead th{
  background:var(--surface-2);color:var(--ink-soft);font:600 var(--fs-xxs)/1 var(--f-mono);
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;
}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:hover{background:var(--brand-50)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .num{font-family:var(--f-mono);font-weight:600;color:var(--ink)}

/* 表单 */
.field{display:flex;flex-direction:column;gap:6px}
.label{font:600 var(--fs-xs)/1 var(--f-body);color:var(--ink-2)}
.input,.select{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-sm);transition:all var(--t-fast);width:100%}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,124,240,.12)}
.input::placeholder{color:var(--ink-mute)}
.input:disabled,.select:disabled{background:var(--surface-2);color:var(--ink-mute);cursor:not-allowed}
.hint{font-size:var(--fs-xxs);color:var(--ink-soft)}
.err{font-size:var(--fs-xxs);color:var(--danger)}
.input.err-b{border-color:var(--danger)}

/* 空态 / 载入 / 错误 */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center}
.empty-ico{width:46px;height:46px;border-radius:14px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center}
.empty-t{font:700 var(--fs-h3)/1.3 var(--f-head);color:var(--ink)}
.empty-s{font-size:var(--fs-xs);color:var(--ink-soft);max-width:320px}

.skel{background:linear-gradient(90deg,#EDF1F6 25%,#F6F8FB 37%,#EDF1F6 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.err-box{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);
  background:var(--danger-soft);border:1px solid var(--danger-line);color:#8C2B2B;font-size:var(--fs-sm)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}