/* ==========================================================================
   永畅物流 · 主题方案（3 套）
   default 经典蓝（css/app.css 原有设计，本文件不做任何覆盖）
   ocean   晴海蓝（取自 dev.fluxtranslab.com）
   iot     智联青（取自 dev.fluxtranslab.com/test1/）

   实现方式：只覆盖设计令牌与少量硬编码配色的外观规则，
   不改变任何结构、尺寸逻辑与交互行为。
   ========================================================================== */

/* ========================================================================
   主题二 · 晴海蓝 ocean
   ======================================================================== */
html[data-theme="ocean"] {
  --primary: #1A6FE8;
  --primary-hover: #2E90F2;
  --primary-active: #1257C2;
  --primary-soft: #E8F2FE;
  --primary-soft-2: #D3E6FC;

  --bg: #EDF4FD;
  --bg-2: #E3EEFA;
  --surface: #FFFFFF;
  --surface-2: #F6FAFF;
  --line: #E1EAF5;
  --line-2: #EDF2F9;

  --text: #1F2A3A;
  --text-2: #47566B;
  --text-3: #78879C;
  --text-4: #A3AFC0;

  --success: #16A34A;  --success-soft: #E7F7EE;
  --warning: #E8901A;  --warning-soft: #FDF3E4;
  --danger:  #E24B4B;  --danger-soft:  #FDECEC;
  --purple:  #7B5BE8;  --purple-soft:  #F0ECFE;
  --cyan:    #12A5B8;  --cyan-soft:    #E4F6F8;
  --gray:    #5B7A9E;  --gray-soft:    #EEF3F9;

  --rail: #0E4FC4;
  --rail-2: #1A6FE8;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(21, 71, 140, .06), 0 2px 12px rgba(21, 71, 140, .08);
  --shadow-lg: 0 14px 40px rgba(15, 60, 130, .18);

  /* 注意：--nav-h / --sub-h / --top-h / --side-w 等布局尺寸一律不在主题中覆盖，
     统一由 css/app.css 的 :root 提供，保证三套主题的骨架尺寸完全一致。
     主题只负责配色与质感。 */
}

html[data-theme="ocean"] body {
  background: linear-gradient(180deg, #D8E9FB 0%, #E9F3FD 22%, #F4FAFF 48%, #FFFFFF 100%);
  background-attachment: fixed;
}

/* 顶部一级导航：饱满蓝色渐变 + 底部高光线 */
[data-theme="ocean"] .topnav {
  background: linear-gradient(100deg, #0E4FC4 0%, #1A6FE8 48%, #2E90F2 100%);
  box-shadow: 0 2px 14px rgba(12, 60, 140, .22);
}
[data-theme="ocean"] .topnav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
  pointer-events: none;
}
[data-theme="ocean"] .nav-logo {
  background: transparent;
  box-shadow: none;
}
[data-theme="ocean"] .nav-mod .nav-dot { box-shadow: 0 0 0 1.5px #1A6FE8; }

/* 卡片：标题装饰条与表头浅渐变 */
[data-theme="ocean"] .card-head {
  background: linear-gradient(180deg, rgba(246,250,255,.9), rgba(255,255,255,.6));
}
[data-theme="ocean"] .card-title::before {
  background: linear-gradient(180deg, #1A6FE8, #4E9BF5);
}

/* 横幅 / 实心统计卡 / 头像 */
[data-theme="ocean"] .banner {
  background: linear-gradient(120deg, #0E4FC4 0%, #1A6FE8 55%, #2E90F2 100%);
}
[data-theme="ocean"] .stat.solid {
  background: linear-gradient(135deg, #1A6FE8, #4E9BF5);
}
[data-theme="ocean"] .stat.selected {
  box-shadow: 0 0 0 2px rgba(26, 111, 232, .15), var(--shadow);
}
[data-theme="ocean"] .tb-avatar {
  background: linear-gradient(135deg, #2E90F2, #7B5BE8);
}
[data-theme="ocean"] .menu-link.active .mi {
  box-shadow: 0 4px 10px rgba(26, 111, 232, .3);
}
[data-theme="ocean"] .modal-head {
  background: linear-gradient(180deg, #F3F8FF 0%, #fff 100%);
}
[data-theme="ocean"] .visit-tab.active { box-shadow: 0 2px 6px rgba(26, 111, 232, .1); }
[data-theme="ocean"] .btn-primary { box-shadow: 0 3px 8px rgba(26, 111, 232, .22); }
[data-theme="ocean"] .tb-search input:focus,
[data-theme="ocean"] .auth-field:focus-within { box-shadow: 0 0 0 3px rgba(26, 111, 232, .12); }

/* 登录 / 注册 / 找回密码 */
[data-theme="ocean"] .auth-body {
  background: linear-gradient(160deg, #D8E9FB 0%, #E9F3FD 45%, #F4FAFF 100%);
}
[data-theme="ocean"] .auth-brand {
  background: linear-gradient(145deg, #0E4FC4 0%, #1A6FE8 55%, #2E90F2 100%);
}

/* ========================================================================
   主题三 · 智联青 iot
   ======================================================================== */
html[data-theme="iot"] {
  --primary: #0891B2;
  --primary-hover: #0284C7;
  --primary-active: #0E7490;
  --primary-soft: rgba(8, 145, 178, .09);
  --primary-soft-2: rgba(8, 145, 178, .24);

  --bg: #EEF4FA;
  --bg-2: #E6EFF7;
  --surface: rgba(255, 255, 255, .86);
  --surface-2: #F3F8FB;
  --line: rgba(14, 116, 144, .14);
  --line-2: rgba(15, 40, 80, .07);

  --text: #0F1E33;
  --text-2: #334861;
  --text-3: #5B6F88;
  --text-4: #8A9BB0;

  --success: #059669;  --success-soft: rgba(16, 185, 129, .10);
  --warning: #D97706;  --warning-soft: rgba(245, 158, 11, .12);
  --danger:  #DC2626;  --danger-soft:  rgba(239, 68, 68, .10);
  --purple:  #7C3AED;  --purple-soft:  rgba(139, 92, 246, .10);
  --cyan:    #0E7490;  --cyan-soft:    rgba(34, 211, 238, .14);
  --gray:    #64748B;  --gray-soft:    rgba(100, 116, 139, .10);

  --rail: #0E7490;
  --rail-2: #0284C7;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(15, 50, 100, .05), 0 4px 18px rgba(15, 50, 100, .06);
  --shadow-lg: 0 20px 50px rgba(15, 40, 80, .18);

  /* 布局尺寸同上，统一继承 css/app.css 的 :root，不在主题中覆盖 */
}

/* 冰蓝底 + 数据网格（全部做成 body 背景层，避免伪元素参与层叠影响正文） */
html[data-theme="iot"] body {
  background:
    repeating-linear-gradient(0deg,  rgba(8,145,178,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(8,145,178,.05) 0 1px, transparent 1px 64px),
    radial-gradient(1100px 520px at 10% -6%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(99,102,241,.10), transparent 58%),
    linear-gradient(180deg, #E6EFF7 0%, #EEF4FA 34%, #F4F8FC 70%, #F7FAFD 100%);
  background-attachment: fixed;
}

/* 顶部一级导航：青→蓝→靛渐变 + 光带 */
[data-theme="iot"] .topnav {
  background: linear-gradient(100deg, #0E7490 0%, #0284C7 52%, #4F46E5 100%);
  box-shadow: 0 4px 20px rgba(2, 80, 130, .22);
}
[data-theme="iot"] .topnav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,.9) 25%, rgba(255,255,255,.7) 50%, rgba(165,180,252,.8) 75%, transparent);
  opacity: .75; pointer-events: none;
}
[data-theme="iot"] .nav-logo {
  background: transparent;
  box-shadow: none;
}
[data-theme="iot"] .nav-mod .nav-dot { box-shadow: 0 0 0 1.5px #0284C7; }
[data-theme="iot"] .nav-mod.active { color: #0E7490; }

/* 玻璃面板 */
[data-theme="iot"] .side {
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(150%) blur(10px);
  border-right: 1px solid rgba(14, 116, 144, .14);
}
[data-theme="iot"] .topbar {
  background: rgba(255, 255, 255, .78);
}

/* 卡片：玻璃底 + 左上角青色转角（用背景层绘制，不引入定位上下文） */
[data-theme="iot"] .card {
  background-color: rgba(255, 255, 255, .86);
  background-image:
    linear-gradient(90deg,  #22D3EE 0 36px, transparent 36px),
    linear-gradient(180deg, #22D3EE 0 36px, transparent 36px);
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%;
  background-position: 0 0, 0 0;
  border: 1px solid rgba(14, 116, 144, .14);
  backdrop-filter: saturate(140%) blur(6px);
}
[data-theme="iot"] .card-head {
  background: linear-gradient(180deg, rgba(236,254,255,.7), rgba(255,255,255,0));
  border-bottom-color: rgba(15, 40, 80, .07);
}
[data-theme="iot"] .card-title::before {
  background: linear-gradient(180deg, #22D3EE, #4F46E5);
}

[data-theme="iot"] .stat {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(14, 116, 144, .14);
  backdrop-filter: saturate(140%) blur(6px);
}
[data-theme="iot"] .stat:hover { box-shadow: 0 10px 28px rgba(15, 50, 100, .10); }
[data-theme="iot"] .stat.solid {
  background: linear-gradient(135deg, #0891B2, #4F46E5);
  border: none;
}
[data-theme="iot"] .stat.selected {
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .2), var(--shadow);
}

[data-theme="iot"] .banner {
  background: linear-gradient(120deg, #0E7490 0%, #0284C7 52%, #4F46E5 100%);
}
[data-theme="iot"] .tb-avatar {
  background: linear-gradient(135deg, #06B6D4, #4F46E5);
}
[data-theme="iot"] .menu-link.active .mi {
  box-shadow: 0 4px 10px rgba(8, 145, 178, .3);
}
[data-theme="iot"] .btn-primary {
  background: linear-gradient(135deg, #06B6D4, #0284C7);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(8, 145, 178, .26);
}
[data-theme="iot"] .btn-primary:hover {
  background: linear-gradient(135deg, #22D3EE, #0891B2);
  border-color: transparent;
}
[data-theme="iot"] .visit-tab.active { box-shadow: 0 2px 6px rgba(8, 145, 178, .12); }
[data-theme="iot"] .tb-search input:focus,
[data-theme="iot"] .auth-field:focus-within { box-shadow: 0 0 0 3px rgba(8, 145, 178, .14); }

/* 弹窗与侧栏弹层保持实心白，保证浮在内容之上时可读 */
[data-theme="iot"] .modal-dialog { background: #fff; }
[data-theme="iot"] .side-flyout { background: #fff; }
[data-theme="iot"] .modal-head {
  background: linear-gradient(180deg, #ECFEFF 0%, #fff 100%);
}
[data-theme="iot"] .modal-foot { background: #F7FBFD; }
[data-theme="iot"] .dropdown { background: rgba(255,255,255,.97); }

/* 表格在玻璃卡片内需要实心行背景 */
[data-theme="iot"] .table .sticky-r,
[data-theme="iot"] .table .sticky-l { background: #FAFDFE; }
[data-theme="iot"] .table tbody tr:hover td { background: rgba(8, 145, 178, .05); }
[data-theme="iot"] .table tbody tr.selected td { background: rgba(8, 145, 178, .09); }

/* 登录 / 注册 / 找回密码 */
[data-theme="iot"] .auth-body {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(800px 420px at 100% 4%, rgba(99,102,241,.12), transparent 58%),
    linear-gradient(160deg, #E6EFF7 0%, #EEF4FA 50%, #F4F8FC 100%);
}
[data-theme="iot"] .auth-brand {
  background: linear-gradient(145deg, #0E7490 0%, #0284C7 52%, #4F46E5 100%);
}

/* ========================================================================
   主题切换控件（顶栏图标 + 下拉面板 / 登录页浮动按钮）
   ======================================================================== */
.theme-dd { width: 296px; padding: 8px; }
.theme-dd .theme-dd-h {
  padding: 6px 8px 10px; border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px; font-weight: 600; font-size: var(--fs);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.theme-dd .theme-dd-h span { font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }

.theme-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.on { border-color: var(--primary); background: var(--primary-soft); }
.theme-opt .theme-sw {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--line);
}
.theme-opt .theme-sw i { display: block; flex: 1; }
.theme-opt .theme-sw i:nth-child(1) { flex: 1.1; }
.theme-opt .theme-tx { flex: 1; min-width: 0; }
.theme-opt .theme-n { font-size: var(--fs); font-weight: 600; color: var(--text); line-height: 1.35; }
.theme-opt .theme-d { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }
.theme-opt .theme-ck { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; opacity: 0; }
.theme-opt.on .theme-ck { opacity: 1; }
.theme-opt .theme-ck svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* 登录页浮动入口 */
.theme-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--primary);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer;
}
.theme-fab:hover { color: var(--primary-hover); box-shadow: var(--shadow-lg); }
.theme-fab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.theme-fab .dropdown { top: auto; bottom: calc(100% + 10px); right: 0; }