/* ============================================================
   themes.css —— 主题包（6 套，契合无人机/飞行主题）
   ------------------------------------------------------------
   用法：给 <html> 加 data-theme="主题id" 即可整套换肤；
   由 public/js/theme.js 负责切换与记忆（localStorage: uav-theme）。
   不写 data-theme 时用 style.css 里的默认（mint 青绿）。
   ============================================================ */

/* ---------------- 1. 青绿 · 无人机（默认） ---------------- */
[data-theme="mint"] {
  --primary: #1a7f6f;
  --primary-dark: #12635a;
  --primary-deep: #0f3d37;
  --primary-mid: #3bb39a;
  --primary-light: #e6f4f1;
  --bar-grad: linear-gradient(90deg, #1a7f6f, #3bb39a);
  --hero-grad: linear-gradient(160deg, #1a7f6f 0%, #145a50 55%, #0f3d37 100%);
  --hero-image: none;
  --topbar-bg: #1a7f6f;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f2f7f5;
  --body-bg-color: #f0f4f3;
  --body-bg-image: url("../img/bg/grid.svg");
  --body-bg-size: 240px 240px;
  --body-bg-repeat: repeat;
}

/* ---------------- 2. 晴空 · 航拍蓝 ---------------- */
[data-theme="sky"] {
  --primary: #2f7fd8;
  --primary-dark: #1f5fab;
  --primary-deep: #143f75;
  --primary-mid: #6fb2f0;
  --primary-light: #e8f2fd;
  --bar-grad: linear-gradient(90deg, #2f7fd8, #6fb2f0);
  --hero-grad: linear-gradient(165deg, #4aa3f0 0%, #2f7fd8 45%, #1b4f8f 100%);
  --hero-image: url("../img/bg/clouds.svg");
  --topbar-bg: #2f7fd8;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #eef5fd;
  --card-soft: #f6faff;
  --card-mute: #e9f1fb;
  --border: #dce8f6;
  --border-strong: #cfdff2;
  --focus-ring: rgba(47, 127, 216, 0.14);
  --chart-grid: #d3e2f4;
  --body-bg-color: #eef5fd;
  --body-bg-image: url("../img/bg/grid-sky.svg");
  --body-bg-size: 260px 260px;
  --body-bg-repeat: repeat;
}

/* ---------------- 3. 极夜 · 夜航（深色） ---------------- */
[data-theme="night"] {
  --primary: #35d0b5;
  --primary-dark: #21a892;
  --primary-deep: #0b3a36;
  --primary-mid: #5ee0c9;
  --primary-light: rgba(53, 208, 181, 0.14);
  --bar-grad: linear-gradient(90deg, #35d0b5, #6fe3ff);
  --hero-grad: linear-gradient(165deg, #0f2233 0%, #0b1725 55%, #060d16 100%);
  --hero-image: url("../img/bg/stars.svg");
  --on-primary: #06201c;
  --text: #e7eef6;
  --text-mid: #b6c4d2;
  --text-light: #8b9cb0;
  --card: #141f2c;
  --card-soft: #1a2634;
  --card-mute: #1f2c3c;
  --border: #26333f;
  --border-strong: #31404f;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --danger: #ff6b6b;
  --danger-dark: #e04a4a;
  --danger-light: rgba(255, 107, 107, 0.15);
  --danger-border: rgba(255, 107, 107, 0.4);
  --success-dark: #5fd39a;
  --success-light: rgba(95, 211, 154, 0.15);
  --warn-dark: #ffc46b;
  --warn-light: rgba(255, 196, 107, 0.15);
  --info-dark: #7db2ff;
  --info-light: rgba(125, 178, 255, 0.15);
  --gold: #ffd479;
  --topbar-bg: #0f1a26;
  --topbar-text-muted: #9db0c4;
  --sidebar-bg: #111b28;
  --sidebar-hover: #1b2836;
  --toast-bg: #2b3a49;
  --chart-grid: #2c3b4b;
  --focus-ring: rgba(53, 208, 181, 0.22);
  --body-bg-color: #0a121c;
  --body-bg-image: url("../img/bg/stars.svg");
  --body-bg-size: 700px 700px;
  --body-bg-repeat: repeat;
}

/* ---------------- 4. 日落 · 巡航（暖色） ---------------- */
[data-theme="sunset"] {
  --primary: #e2663c;
  --primary-dark: #c14e28;
  --primary-deep: #7d2f16;
  --primary-mid: #f5956a;
  --primary-light: #fdeee6;
  --bar-grad: linear-gradient(90deg, #e2663c, #f0a05e);
  --hero-grad: linear-gradient(165deg, #f0a05e 0%, #e2663c 42%, #8e3b52 100%);
  --hero-image: url("../img/bg/sunset.svg");
  --on-primary: #ffffff;
  --card-soft: #fff8f4;
  --card-mute: #fbeade;
  --border: #f2ddd0;
  --danger: #d94f4f;
  --danger-light: #fdeeee;
  --danger-border: #f5c9c9;
  --warn-dark: #a5701b;
  --warn-light: #fff5e2;
  --info-dark: #8a5aa8;
  --info-light: #f6eefb;
  --gold: #e8b34a;
  --topbar-bg: #d95f36;
  --topbar-text-muted: #ffe8dc;
  --sidebar-bg: #fffaf7;
  --sidebar-hover: #fbeee5;
  --chart-grid: #f0d9c9;
  --focus-ring: rgba(226, 102, 60, 0.14);
  --body-bg-color: #fdf3ec;
  --body-bg-image: url("../img/bg/topo.svg");
  --body-bg-size: 420px 420px;
  --body-bg-repeat: repeat;
}

/* ---------------- 5. 战术 · 军绿 ---------------- */
[data-theme="tactical"] {
  --primary: #4f6b3a;
  --primary-dark: #3b5330;
  --primary-deep: #24331d;
  --primary-mid: #7d9b5f;
  --primary-light: #ebf0e2;
  --bar-grad: linear-gradient(90deg, #4f6b3a, #8fae63);
  --hero-grad: linear-gradient(165deg, #5d7a44 0%, #3b5330 55%, #1f2c17 100%);
  --hero-image: url("../img/bg/camo.svg");
  --text: #2b3327;
  --text-mid: #5c6653;
  --text-light: #7d8674;
  --card: #ffffff;
  --card-soft: #f7f7f0;
  --card-mute: #eeeee2;
  --border: #e0e2d2;
  --border-strong: #d5d8c4;
  --danger: #b3452f;
  --danger-light: #fbeeea;
  --danger-border: #eccdc3;
  --warn-dark: #8a6a15;
  --warn-light: #fbf3d9;
  --success-dark: #3f6b33;
  --success-light: #eef5e6;
  --topbar-bg: #4f6b3a;
  --topbar-text-muted: #e7efd9;
  --sidebar-bg: #fbfbf6;
  --sidebar-hover: #f0f1e4;
  --gold: #d9b451;
  --chart-grid: #dbdec9;
  --focus-ring: rgba(79, 107, 58, 0.14);
  --body-bg-color: #f5f5ec;
  --body-bg-image: url("../img/bg/topo-dark.svg");
  --body-bg-size: 400px 400px;
  --body-bg-repeat: repeat;
}

/* ---------------- 6. 蓝图 · 工程（深色） ---------------- */
[data-theme="blueprint"] {
  --primary: #4ea8de;
  --primary-dark: #2f81b8;
  --primary-deep: #0d3350;
  --primary-mid: #7cc4f0;
  --primary-light: rgba(78, 168, 222, 0.16);
  --bar-grad: linear-gradient(90deg, #4ea8de, #8fd6ff);
  --hero-grad: linear-gradient(165deg, #123a5c 0%, #0b2740 55%, #061726 100%);
  --hero-image: url("../img/bg/blueprint.svg");
  --on-primary: #05202f;
  --text: #e3edf7;
  --text-mid: #aec4d8;
  --text-light: #86a0b8;
  --card: #102a42;
  --card-soft: #14314c;
  --card-mute: #183a58;
  --border: #1f4463;
  --border-strong: #295274;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --danger: #ff7a7a;
  --danger-dark: #e05a5a;
  --danger-light: rgba(255, 122, 122, 0.16);
  --danger-border: rgba(255, 122, 122, 0.4);
  --success-dark: #66d9b0;
  --success-light: rgba(102, 217, 176, 0.16);
  --warn-dark: #ffcb6b;
  --warn-light: rgba(255, 203, 107, 0.16);
  --info-dark: #9ecbff;
  --info-light: rgba(158, 203, 255, 0.16);
  --gold: #ffd479;
  --topbar-bg: #0c2337;
  --topbar-text-muted: #a7c1d8;
  --sidebar-bg: #0e2539;
  --sidebar-hover: #16344f;
  --toast-bg: #1c3d59;
  --chart-grid: #23496a;
  --focus-ring: rgba(78, 168, 222, 0.22);
  --body-bg-color: #08192a;
  --body-bg-image: url("../img/bg/blueprint.svg");
  --body-bg-size: 300px 300px;
  --body-bg-repeat: repeat;
}

/* ---------------- 自定义背景照片（管理员上传，叠加在主题之上） ---------------- */
html[data-bg-photo="on"] {
  --body-bg-image: var(--custom-photo);
  --body-bg-size: cover;
  --body-bg-repeat: no-repeat;
  --body-bg-attachment: fixed;
}
html[data-bg-photo="on"] body {
  /* 照片上压一层半透明遮罩，保证文字可读 */
  background-image: linear-gradient(rgba(255, 255, 255, var(--photo-veil, 0.72)), rgba(255, 255, 255, var(--photo-veil, 0.72))), var(--custom-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
html[data-bg-photo="on"][data-dark="1"] body {
  background-image: linear-gradient(rgba(6, 12, 20, var(--photo-veil, 0.78)), rgba(6, 12, 20, var(--photo-veil, 0.78))), var(--custom-photo);
}

/* 登录页是整屏渐变，照片要盖在它上面才看得见 */
html[data-bg-photo="on"] .login-page {
  background-image: linear-gradient(rgba(255, 255, 255, var(--photo-veil, 0.72)), rgba(255, 255, 255, var(--photo-veil, 0.72))), var(--custom-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
html[data-bg-photo="on"][data-dark="1"] .login-page {
  background-image: linear-gradient(rgba(6, 12, 20, var(--photo-veil, 0.78)), rgba(6, 12, 20, var(--photo-veil, 0.78))), var(--custom-photo);
}

/* ---------------- 主题选择面板 ---------------- */
.theme-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (max-width: 520px) { .theme-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
.theme-card {
  border: 2px solid var(--border); border-radius: 10px; padding: 8px;
  cursor: pointer; background: var(--card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--primary-mid); }
.theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-preview { height: 72px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--border); }
.theme-preview.dark { border-color: #2a3a4a; }
.tp-bar { height: 13px; }
.tp-card {
  position: absolute; left: 9px; right: 9px; top: 22px; bottom: 9px;
  border-radius: 5px; padding: 8px 8px 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.tp-line { height: 5px; border-radius: 3px; margin-bottom: 5px; opacity: .85; }
.tp-line.short { width: 58%; }
.tp-btn { height: 10px; width: 44px; border-radius: 5px; }
.theme-name { font-size: 13px; font-weight: 600; margin-top: 6px; }
.theme-desc { font-size: 11px; color: var(--text-light); line-height: 1.5; }
.theme-custom { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); }
.theme-upload { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.theme-upload.hidden { display: none; }

/* 登录页 / 家长端的悬浮主题按钮 */
.theme-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--primary); color: var(--on-primary); font-size: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-fab:hover { filter: brightness(1.06); }
@media (max-width: 768px) { .theme-fab { bottom: 78px; } } /* 手机端避开底部导航 */