/* ==========================================================================
   前台风格模板
   用法：<html data-theme="ocean">；不写或写 forest = 默认林绿（即 ui.css 里的 :root）
   原理：所有组件只引用 var(--xxx)，换肤 = 换一组变量，不动任何组件。
   后台「前台风格」页切换，服务端把 data-theme 直接写进 HTML，首屏不闪。

   约定：
   - 状态色（ok/warn/err/info）默认沿用 :root，只有深色和高对比主题重定义
   - 地图上的地块配色（绿/红/灰/黑）是大疆 APP 实测值，不随主题变
   - 新增主题：复制一段改变量，再到 main.py 的 UI_THEMES 登记一行即可
   ========================================================================== */

/* ---------- 海盐蓝：清爽、偏工具感 ---------- */
:root[data-theme="ocean"] {
  --bg: #f2f6fa;  --bg-2: #e9f0f6;
  --surface: #ffffff;  --surface-2: #f7fafd;  --surface-3: #edf2f7;
  --line: #dfe7ef;  --line-2: #cbd8e4;  --line-3: #a9bacb;
  --text: #14202e;  --text-2: #44556a;  --text-3: #6b7d93;  --text-4: #98a8ba;
  --accent: #1f66b0;  --accent-2: #2a78c9;  --accent-3: #164f8a;
  --accent-bg: #e8f1fa;  --accent-line: #b9d2ea;
  --accent-rgb: 31, 102, 176;  --shadow-rgb: 16, 30, 46;
  --overlay: rgba(14, 26, 40, .45);
  --map-bg: #dde5ee;  --scroll: #c8d4e0;
  --r-sm: 5px;  --r: 8px;  --r-md: 12px;  --r-lg: 16px;
}

/* ---------- 麦田金：暖色，农业场景 ---------- */
:root[data-theme="harvest"] {
  --bg: #f8f3ea;  --bg-2: #f1ead9;
  --surface: #fffdf8;  --surface-2: #fbf7ee;  --surface-3: #f2ebdb;
  --line: #e8dfca;  --line-2: #d9ccb0;  --line-3: #bba98a;
  --text: #2a2116;  --text-2: #5a4b36;  --text-3: #85755d;  --text-4: #ad9f89;
  --accent: #c2570c;  --accent-2: #d4660f;  --accent-3: #9d4509;
  --accent-bg: #fbeedd;  --accent-line: #efc79d;
  --accent-rgb: 194, 87, 12;  --shadow-rgb: 50, 36, 12;
  --overlay: rgba(40, 28, 10, .45);
  --glass: rgba(255, 253, 248, .94);
  --map-bg: #e6dfcd;  --scroll: #d9ccb0;
  --r-sm: 5px;  --r: 8px;  --r-md: 12px;  --r-lg: 16px;
}

/* ---------- 墨白：黑白灰极简，直角、几乎无阴影 ---------- */
:root[data-theme="ink"] {
  --bg: #f5f5f4;  --bg-2: #ececea;
  --surface: #ffffff;  --surface-2: #fafaf9;  --surface-3: #efefed;
  --line: #e0e0dd;  --line-2: #c9c9c5;  --line-3: #a3a39e;
  --text: #111111;  --text-2: #444444;  --text-3: #6f6f6b;  --text-4: #9a9a96;
  --accent: #111111;  --accent-2: #2a2a2a;  --accent-3: #000000;
  --accent-bg: #efefed;  --accent-line: #c9c9c5;
  --accent-rgb: 17, 17, 17;  --shadow-rgb: 0, 0, 0;
  --overlay: rgba(0, 0, 0, .45);
  --map-bg: #e4e4e1;  --scroll: #cfcfcb;
  --r-sm: 2px;  --r: 3px;  --r-md: 4px;  --r-lg: 6px;
  --sh-1: none;
  --sh-2: 0 1px 0 rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04);
  --sh-3: 0 18px 40px -20px rgba(0, 0, 0, .4);
}

/* ---------- 宣纸：米黄底 + 衬线字体，文档感 ---------- */
:root[data-theme="paper"] {
  --bg: #f5f0e6;  --bg-2: #ede6d6;
  --surface: #fffcf5;  --surface-2: #faf6ec;  --surface-3: #f0e9d9;
  --line: #e5dcc8;  --line-2: #d3c7ac;  --line-3: #b3a687;
  --text: #2b2118;  --text-2: #5b4d3d;  --text-3: #85766a;  --text-4: #aea08c;
  --accent: #7a4a2b;  --accent-2: #8f5a38;  --accent-3: #5e3720;
  --accent-bg: #f3e8dc;  --accent-line: #dcc3ab;
  --accent-rgb: 122, 74, 43;  --shadow-rgb: 60, 40, 20;
  --overlay: rgba(43, 33, 24, .45);
  --glass: rgba(255, 252, 245, .94);
  --map-bg: #e2dccb;  --scroll: #d3c7ac;
  --r-sm: 3px;  --r: 4px;  --r-md: 6px;  --r-lg: 8px;
  --sh-1: 0 1px 1px rgba(var(--shadow-rgb), .05);
  --sh-2: 0 4px 12px -8px rgba(var(--shadow-rgb), .3);
  --sans: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong",
          "SimSun", Georgia, "Times New Roman", serif;
}

/* ---------- 夜幕：深色，夜里 / 暗处用 ---------- */
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0f1512;  --bg-2: #131b17;
  --surface: #18211c;  --surface-2: #1d2822;  --surface-3: #243029;
  --line: #2a3731;  --line-2: #34443c;  --line-3: #4a5e53;
  --text: #e7eee9;  --text-2: #b6c4bb;  --text-3: #8a9b91;  --text-4: #66766c;
  --accent: #4cb383;  --accent-2: #5cc494;  --accent-3: #3a9a6d;
  --accent-bg: #1a2f25;  --accent-line: #2f5a46;
  --on-accent: #06130c;
  --accent-rgb: 76, 179, 131;  --shadow-rgb: 0, 0, 0;

  --ok: #5fc592;    --ok-bg: #17291f;    --ok-line: #2c5a43;    --ok-ink: #8fe0b6;
  --warn: #e0a94a;  --warn-bg: #2c2413;  --warn-line: #5c4a22;  --warn-ink: #f0c878;
  --err: #ef7b72;   --err-bg: #2d1a19;   --err-line: #5e2f2c;   --err-ink: #f5a39d;
  --info: #7aa7e0;  --info-bg: #162234;  --info-line: #2d4668;  --info-ink: #a9c6ee;

  --overlay: rgba(0, 0, 0, .62);
  --glass: rgba(24, 33, 28, .94);
  --glass-2: rgba(255, 255, 255, .08);
  --map-bg: #101713;  --scroll: #34443c;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px -10px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .4);
  --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
/* 深色下 Leaflet 自带控件和 tooltip 是白底，要跟着变。
   所有深色主题（night / deepsea）共用：用 data-dark 标记，main.py 直出时一并写上 */
:root[data-dark] .leaflet-bar a,
:root[data-dark] .leaflet-control-layers,
:root[data-dark] .leaflet-bar a:hover {
  background: var(--surface); color: var(--text); border-color: var(--line-2);
}
:root[data-dark] .leaflet-control-attribution {
  background: var(--glass); color: var(--text-3);
}
:root[data-dark] .leaflet-control-attribution a { color: var(--accent); }
:root[data-dark] .leaflet-tooltip,
:root[data-dark] .leaflet-popup-content-wrapper,
:root[data-dark] .leaflet-popup-tip {
  background: var(--surface); color: var(--text); border-color: var(--line-2);
}
:root[data-dark] .plotlabel { color: var(--text); }
:root[data-dark] img { filter: none; }

/* ---------- 高对比：强光下看手机用，黑字白底、深色主按钮、粗边框 ---------- */
:root[data-theme="contrast"] {
  --bg: #ffffff;  --bg-2: #f2f2f2;
  --surface: #ffffff;  --surface-2: #f6f6f6;  --surface-3: #ececec;
  --line: #8a8a8a;  --line-2: #4d4d4d;  --line-3: #222222;
  --text: #000000;  --text-2: #1a1a1a;  --text-3: #333333;  --text-4: #555555;
  --accent: #005c33;  --accent-2: #00743f;  --accent-3: #00442a;
  --accent-bg: #e3f3ea;  --accent-line: #00743f;
  --accent-rgb: 0, 92, 51;  --shadow-rgb: 0, 0, 0;

  --ok: #00643a;    --ok-bg: #e3f5ec;   --ok-line: #00643a;   --ok-ink: #00391f;
  --warn: #7a4a00;  --warn-bg: #fff1cc; --warn-line: #7a4a00; --warn-ink: #4d2e00;
  --err: #a30000;   --err-bg: #ffe3e3;  --err-line: #a30000;  --err-ink: #6b0000;
  --info: #0b4a99;  --info-bg: #e2eefc; --info-line: #0b4a99; --info-ink: #06305f;

  --overlay: rgba(0, 0, 0, .6);
  --map-bg: #e6e6e6;  --scroll: #6b6b6b;
  --r-sm: 4px;  --r: 6px;  --r-md: 8px;  --r-lg: 10px;
  --sh-1: 0 1px 0 rgba(0, 0, 0, .35);
  --sh-2: 0 2px 0 rgba(0, 0, 0, .3);
  --sh-3: 0 12px 30px -10px rgba(0, 0, 0, .55);
}
:root[data-theme="contrast"] body { font-size: 15px; }
:root[data-theme="contrast"] .btn,
:root[data-theme="contrast"] input,
:root[data-theme="contrast"] select,
:root[data-theme="contrast"] textarea { border-width: 1.5px; }
:root[data-theme="contrast"] .btn:focus-visible,
:root[data-theme="contrast"] input:focus,
:root[data-theme="contrast"] select:focus,
:root[data-theme="contrast"] textarea:focus {
  outline: 3px solid var(--accent); outline-offset: 1px;
}

/* ==========================================================================
   第二批（2026-11-03）—— 配色取自开源调色板，均为宽松许可，可商用：
   - 冰原 / 极夜：Nord（arcticicestudio/nord，MIT）
   - 青禾：Tailwind CSS 默认色板 teal / slate（MIT）
   - 工业蓝：IBM Carbon Design System Gray 10 + Blue 60（Apache-2.0）
   - 薰衣草：Catppuccin Latte 底色（MIT）+ Tailwind violet-600
   - 大字版：沿用林绿配色，只放大字号与点击区域（老人 / 户外戴手套）
   对比度（WCAG）：正文/卡片 ≥ 10，主按钮文字 ≥ 5，次要文字 ≥ 4.5，_test_theme.py 自动校验
   ========================================================================== */

/* ---------- 冰原（Nord Snow Storm）：冷灰蓝，安静 ---------- */
:root[data-theme="nord"] {
  --bg: #eceff4;  --bg-2: #e5e9f0;
  --surface: #ffffff;  --surface-2: #f6f8fb;  --surface-3: #e5e9f0;
  --line: #dde3ec;  --line-2: #c9d2df;  --line-3: #a7b3c5;
  --text: #2e3440;  --text-2: #434c5e;  --text-3: #5c677d;  --text-4: #8f9bb0;
  --accent: #4c6a92;  --accent-2: #5e81ac;  --accent-3: #3b5577;
  --accent-bg: #e8eef6;  --accent-line: #bccbdf;
  --accent-rgb: 76, 106, 146;  --shadow-rgb: 46, 52, 64;
  --overlay: rgba(46, 52, 64, .45);
  --map-bg: #d8dee9;  --scroll: #c9d2df;
  --r-sm: 4px;  --r: 6px;  --r-md: 10px;  --r-lg: 14px;
}

/* ---------- 青禾（Tailwind teal-700 + slate）：青绿，比林绿更亮 ---------- */
:root[data-theme="teal"] {
  --bg: #f1f6f5;  --bg-2: #e7f0ee;
  --surface: #ffffff;  --surface-2: #f6faf9;  --surface-3: #e9f1ef;
  --line: #dbe7e4;  --line-2: #c3d6d2;  --line-3: #9db8b2;
  --text: #122826;  --text-2: #3b5552;  --text-3: #5b7471;  --text-4: #8ea5a1;
  --accent: #0f766e;  --accent-2: #0d9488;  --accent-3: #115e59;
  --accent-bg: #e6f4f2;  --accent-line: #a7d8d1;
  --accent-rgb: 15, 118, 110;  --shadow-rgb: 18, 40, 38;
  --overlay: rgba(18, 40, 38, .45);
  --map-bg: #d9e6e3;  --scroll: #c3d6d2;
  --r-sm: 5px;  --r: 8px;  --r-md: 12px;  --r-lg: 16px;
}

/* ---------- 工业蓝（IBM Carbon）：直角、无阴影、IBM 蓝，像专业软件 ---------- */
:root[data-theme="carbon"] {
  --bg: #f4f4f4;  --bg-2: #e8e8e8;
  --surface: #ffffff;  --surface-2: #f9f9f9;  --surface-3: #f4f4f4;
  --line: #e0e0e0;  --line-2: #c6c6c6;  --line-3: #8d8d8d;
  --text: #161616;  --text-2: #525252;  --text-3: #6f6f6f;  --text-4: #a8a8a8;
  --accent: #0f62fe;  --accent-2: #0353e9;  --accent-3: #002d9c;
  --accent-bg: #edf5ff;  --accent-line: #a6c8ff;
  --accent-rgb: 15, 98, 254;  --shadow-rgb: 0, 0, 0;
  --ok: #198038;   --ok-bg: #defbe6;   --ok-line: #a7f0ba;   --ok-ink: #0e6027;
  --err: #da1e28;  --err-bg: #fff1f1;  --err-line: #ffb3b8;  --err-ink: #a2191f;
  --overlay: rgba(22, 22, 22, .5);
  --map-bg: #e0e0e0;  --scroll: #c6c6c6;
  --r-sm: 0px;  --r: 0px;  --r-md: 0px;  --r-lg: 0px;
  --sh-1: none;
  --sh-2: 0 2px 6px rgba(0, 0, 0, .2);
  --sh-3: 0 12px 32px -8px rgba(0, 0, 0, .35);
  --sans: "IBM Plex Sans", "Segoe UI", "Microsoft YaHei UI", "PingFang SC",
          "Noto Sans SC", sans-serif;
}
:root[data-theme="carbon"] .btn-primary { box-shadow: none; }

/* ---------- 薰衣草（Catppuccin Latte）：柔和紫，年轻化 ---------- */
:root[data-theme="latte"] {
  --bg: #eff1f5;  --bg-2: #e6e9ef;
  --surface: #ffffff;  --surface-2: #f7f8fb;  --surface-3: #e6e9ef;
  --line: #dce0e8;  --line-2: #ccd0da;  --line-3: #9ca0b0;
  --text: #2f3146;  --text-2: #4c4f69;  --text-3: #6c6f85;  --text-4: #9ca0b0;
  --accent: #7c3aed;  --accent-2: #8b5cf6;  --accent-3: #6d28d9;
  --accent-bg: #f1ebfe;  --accent-line: #d4c2fb;
  --accent-rgb: 124, 58, 237;  --shadow-rgb: 47, 49, 70;
  --overlay: rgba(47, 49, 70, .45);
  --map-bg: #dce0e8;  --scroll: #ccd0da;
  --r-sm: 6px;  --r: 9px;  --r-md: 13px;  --r-lg: 18px;
}

/* ---------- 极夜（Nord Polar Night）：冷色深色模式，比「夜幕」更蓝 ---------- */
:root[data-theme="deepsea"] {
  color-scheme: dark;
  --bg: #242933;  --bg-2: #2a303c;
  --surface: #2e3440;  --surface-2: #343b48;  --surface-3: #3b4252;
  --line: #3b4252;  --line-2: #434c5e;  --line-3: #4c566a;
  --text: #eceff4;  --text-2: #d0d6e0;  --text-3: #a3adbf;  --text-4: #7b869a;
  --accent: #88c0d0;  --accent-2: #8fbcbb;  --accent-3: #81a1c1;
  --accent-bg: #33404c;  --accent-line: #4f6a78;
  --on-accent: #1b2028;
  --accent-rgb: 136, 192, 208;  --shadow-rgb: 0, 0, 0;

  --ok: #a3be8c;    --ok-bg: #2f3a33;    --ok-line: #4d6150;    --ok-ink: #c3d9b0;
  --warn: #ebcb8b;  --warn-bg: #3a3629;  --warn-line: #6b5d3c;  --warn-ink: #f2dcae;
  --err: #e08891;   --err-bg: #3d2d32;   --err-line: #6e434b;   --err-ink: #f0b3b9;
  --info: #81a1c1;  --info-bg: #2c3746;  --info-line: #48607d;  --info-ink: #b4c8de;

  --overlay: rgba(0, 0, 0, .6);
  --glass: rgba(46, 52, 64, .94);
  --glass-2: rgba(255, 255, 255, .08);
  --map-bg: #242933;  --scroll: #4c566a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px -10px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .35);
  --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .75);
}

/* ---------- 大字版：林绿配色，字号 16、按钮 40px 高（老人 / 户外戴手套） ---------- */
:root[data-theme="large"] {
  --r-sm: 5px;  --r: 8px;  --r-md: 12px;  --r-lg: 16px;
}
:root[data-theme="large"] body { font-size: 16px; line-height: 1.65; }
:root[data-theme="large"] .btn { height: 40px; padding: 0 16px; font-size: 15px; }
:root[data-theme="large"] .btn-lg { height: 46px; font-size: 16px; }
:root[data-theme="large"] .btn-sm { height: 34px; font-size: 14px; padding: 0 12px; }
:root[data-theme="large"] .btn-icon { width: 40px; padding: 0; }
:root[data-theme="large"] input[type=text],
:root[data-theme="large"] input[type=tel],
:root[data-theme="large"] input[type=password],
:root[data-theme="large"] input[type=number],
:root[data-theme="large"] input[type=search],
:root[data-theme="large"] select { height: 42px; font-size: 16px; }
:root[data-theme="large"] textarea { font-size: 16px; }
:root[data-theme="large"] .field > label,
:root[data-theme="large"] .lbl,
:root[data-theme="large"] .help { font-size: 14px; }
:root[data-theme="large"] input[type=checkbox] { width: 20px; height: 20px; }
:root[data-theme="large"] .ico { width: 19px; height: 19px; }
:root[data-theme="large"] .side-tab { font-size: 15px; padding: 9px 16px 11px; }
@media (min-width: 901px) {
  :root[data-theme="large"] .side { width: 440px; flex-basis: 440px; }
}