/* ============================================================
 * funnystore_theme.css — 2026-10-19 主题切换（默认暗黑）
 * 通过 body[data-theme="dark"|"light"] 控制
 * 默认深色（用户的偏好：dark by default）
 * ============================================================ */

:root {
    --fs-bg: #f4f6f9;
    --fs-bg-card: #ffffff;
    --fs-bg-soft: #f8fafc;
    --fs-text: #333333;
    --fs-text-soft: #6b7280;
    --fs-border: #e5e7eb;
    --fs-border-strong: #d7dde5;
    --fs-link: #2f5e9a;
    --fs-link-hover: #3b6ea8;
    --fs-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

body[data-theme="dark"] {
    --fs-bg: #0f172a;
    --fs-bg-card: #1e293b;
    --fs-bg-soft: #0b1220;
    --fs-text: #e2e8f0;
    --fs-text-soft: #94a3b8;
    --fs-border: #334155;
    --fs-border-strong: #475569;
    --fs-link: #7dd3fc;
    --fs-link-hover: #bae6fd;
    --fs-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 让 body 主题色生效（funnystore_layout.css 已声明 body 背景） */
body {
    background-color: var(--fs-bg);
    color: var(--fs-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 主题切换按钮：固定右上角 */
.fs-theme-toggle {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 10000;
    background: var(--fs-bg-card);
    color: var(--fs-text);
    border: 1px solid var(--fs-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--fs-shadow);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.fs-theme-toggle:hover {
    border-color: var(--fs-link);
    transform: translateY(-1px);
}
.fs-theme-toggle:active {
    transform: translateY(0);
}

/* 暗色主题下的主要容器 */
body[data-theme="dark"] .search-panel,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .action-bar,
body[data-theme="dark"] #toolbar,
body[data-theme="dark"] #msg,
body[data-theme="dark"] .table {
    background-color: var(--fs-bg-card) !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}

body[data-theme="dark"] .search-form-container,
body[data-theme="dark"] .search-group {
    background-color: transparent !important;
}

/* 输入框、下拉、按钮在深色下变深底浅字 */
body[data-theme="dark"] .form-input,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .form-input::placeholder,
body[data-theme="dark"] input::placeholder {
    color: var(--fs-text-soft) !important;
}

/* 操作链接按钮 */
body[data-theme="dark"] .action-link {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .action-link:hover {
    background-color: #1e293b !important;
    border-color: var(--fs-link) !important;
    color: var(--fs-link) !important;
}
body[data-theme="dark"] .action-link.action-link-danger {
    background-color: #2d1212 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* 主按钮 */
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] button.btn-primary {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] a.btn-secondary {
    background-color: #0b1220 !important;
    border-color: var(--fs-border) !important;
    color: var(--fs-text) !important;
}

/* 表格 */
body[data-theme="dark"] table,
body[data-theme="dark"] th,
body[data-theme="dark"] td {
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02) !important;
}
/* 2026-10-22：hover 背景必须用不透明色。
   原来的 rgba(125,211,252,0.08) 半透明会透出 <tr style="background-color:#ffffff"> 的白色底，
   导致 hover 时整行变白、浅色文字看不清（对比度太小）。#2a3d53 ≈ 12% 浅蓝叠加在 #1e293b 上。 */
body[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: #2a3d53 !important;
}
/* 2026-10-19 v2：funnystore_layout.css 里 .table-list / .table-list th 是硬编码白色，
   只覆盖 .table/.table-striped 还会有大面积白。强制把 .table-list 也染深。 */
body[data-theme="dark"] .table-list,
body[data-theme="dark"] .lpw-data-table {
    background-color: var(--fs-bg-card) !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table-list th,
body[data-theme="dark"] .lpw-data-table th {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-bottom-color: var(--fs-border-strong) !important;
}
body[data-theme="dark"] .table-list td,
body[data-theme="dark"] .lpw-data-table td {
    background-color: var(--fs-bg-card) !important;
    color: var(--fs-text) !important;
    border-bottom-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table-list tr:hover td,
body[data-theme="dark"] .lpw-data-table tr:hover td {
    /* 2026-10-22：不透明色，避免透出行内白色背景（同上） */
    background-color: #2a3d53 !important;
}
/* table-responsive / lpw-table-scroll 的滚动容器在暗色下变深 */
body[data-theme="dark"] .table-responsive,
body[data-theme="dark"] .lpw-table-scroll {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
}

/* 2026-10-19 v3：funnystore_layout.css 里 .search-panel / .form-input / .form-select /
   .order-card / .summary-bar / .card-header-custom 全部硬编码 #fff，
   暗色下需要一并染深，否则搜索面板、订单卡、汇总条都还是亮白色块。 */
body[data-theme="dark"] .search-panel {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
body[data-theme="dark"] .form-input,
body[data-theme="dark"] .form-select {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .form-input::placeholder {
    color: var(--fs-text-soft) !important;
}
body[data-theme="dark"] .order-card,
body[data-theme="dark"] .summary-bar {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
body[data-theme="dark"] .summary-item {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .card-header-custom {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-bottom-color: var(--fs-border) !important;
}

/* 2026-10-19 v3：toolbar / msg 区暗色 */
body[data-theme="dark"] #toolbar,
body[data-theme="dark"] #msg {
    background-color: var(--fs-bg-card) !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}

/* 2026-10-19 v3：链接颜色（暗色下默认 link 太暗看不清） */
body[data-theme="dark"] a,
body[data-theme="dark"] a:link {
    color: var(--fs-link) !important;
}
body[data-theme="dark"] a:hover {
    color: var(--fs-link-hover) !important;
}

/* 2026-10-19 v3：tag 类小标签（绿色/蓝色/灰色背景在深色下也是白底） */
body[data-theme="dark"] .tag-green {
    background-color: rgba(103,194,58,0.18) !important;
    color: #67c23a !important;
    border-color: rgba(103,194,58,0.3) !important;
}
body[data-theme="dark"] .tag-blue {
    background-color: rgba(64,158,255,0.18) !important;
    color: #7dd3fc !important;
    border-color: rgba(64,158,255,0.3) !important;
}
body[data-theme="dark"] .tag-gray {
    background-color: rgba(144,163,171,0.18) !important;
    color: var(--fs-text-soft) !important;
    border-color: rgba(144,163,171,0.3) !important;
}

/* 2026-10-19 v3：移动端 header / sidebar mobile 背景也染深 */
body[data-theme="dark"] .mobile-header {
    background-color: var(--fs-bg-card) !important;
    border-bottom-color: var(--fs-border) !important;
}
body[data-theme="dark"] .btn-toggle-sidebar {
    background-color: var(--fs-bg-card) !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}

/* 侧栏浅色版本（用户开启浅色主题时，sidebar 仍然可以保留原来的深色不变，保持品牌一致） */
body[data-theme="dark"] .sidebar-column {
    background: #111827 !important;
    color: #e5e7eb !important;
}
body[data-theme="dark"] .sidebar-column a {
    color: #93c5fd !important;
}
body[data-theme="dark"] .sidebar-column a:hover {
    background: #1f2937 !important;
}

/* info-box / 错误消息 */
body[data-theme="dark"] .alert-info,
body[data-theme="dark"] .alert-success,
body[data-theme="dark"] .alert-warning,
body[data-theme="dark"] .alert-danger {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-color: var(--fs-border) !important;
}

/* 主题切换图标根据主题切换 */
body[data-theme="dark"] .fs-theme-toggle .fs-icon-light { display: inline; }
body[data-theme="dark"] .fs-theme-toggle .fs-icon-dark  { display: none; }
body[data-theme="light"] .fs-theme-toggle .fs-icon-light { display: none; }
body[data-theme="light"] .fs-theme-toggle .fs-icon-dark  { display: inline; }

/* ============================================================
 * 2026-10-22：全局接入兜底 — 行内浅色状态行的暗色映射
 * 大量旧页面（list_order.php 等 40+ 文件）用
 * <tr style='background-color:#FFFFFF'> 等行内底色标记状态，
 * 暗黑下浅底 + 浅字（--fs-text）不可读。
 * P0-2 会把这些收敛为 class；在此之前用属性选择器（i = 忽略大小写）兜底。
 * 注意：#fff 是 #ffff00 等的子串，故状态色规则必须写在白底规则之后
 * （同特异性后者胜出）。
 * ============================================================ */
/* 白底普通行 → 深色卡片底 */
body[data-theme="dark"] tr[style*="#fff" i] > td,
body[data-theme="dark"] td[style*="#ffffff" i] {
    background-color: var(--fs-bg-card) !important;
}
/* 黄色（错误）行 → 深琥珀，保留状态可辨 */
body[data-theme="dark"] tr[style*="#ffff00" i] > td { background-color: #6b5900 !important; }
/* 灰色（未发货）行 */
body[data-theme="dark"] tr[style*="#888" i] > td { background-color: #3f4753 !important; }
/* 淡紫（汇总）行 */
body[data-theme="dark"] tr[style*="#aaaaff" i] > td { background-color: #2a3d53 !important; }
/* 粉色行 */
body[data-theme="dark"] tr[style*="#ffaaff" i] > td { background-color: #6d3a6d !important; }
/* 绿色行 */
body[data-theme="dark"] tr[style*="#aaffaa" i] > td { background-color: #2f5c3a !important; }
/* 浅青（未发货明细）行 */
body[data-theme="dark"] tr[style*="#e0ffff" i] > td { background-color: #12333d !important; }
/* 浅灰（匹配行）行 */
body[data-theme="dark"] tr[style*="#f0f0f0" i] > td { background-color: #243044 !important; }

/* ============================================================
 * 2026-10-22 v3：暗黑 body 底色 !important 兜底
 * xndatepicker.css 等由 JS 动态注入的样式表，加载顺序在主题 css 之后，
 * 其 body{background:#fff}（同特异性）会反超主题；旧缓存下更是必然。
 * 用 !important 保证暗黑底色始终生效（浅色不加 important，避免覆盖
 * 其他页面的自定义浅色背景）。
 * ============================================================ */
body[data-theme="dark"] {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ============================================================
 * 2026-10-22 v4：暗黑对比度修复 — list_order_detail / list_pay / list_order_send
 * 原因：这三页的自定义类 / 行内浅色样式没被上面规则覆盖，暗黑下出现
 *   1) 浅字落在浅底上（.detail-card 白卡、list_pay 行内 #f8f9fa 搜索框）
 *   2) 深字落在深底上（.field-val/.order-id 等 list_order_send 卡片）
 *   3) Bootstrap text-* 辅助色太暗、分页黑字、<font color=blue> 等
 * ============================================================ */

/* --- Bootstrap 文本辅助色（text-danger #a94442 / text-muted #777 在深底上不可读） --- */
body[data-theme="dark"] .text-danger  { color: #f87171 !important; }
body[data-theme="dark"] .text-success { color: #4ade80 !important; }
body[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
body[data-theme="dark"] .text-primary { color: #7dd3fc !important; }
body[data-theme="dark"] .text-info    { color: #7dd3fc !important; }
body[data-theme="dark"] .text-muted   { color: var(--fs-text-soft) !important; }

/* --- 旧式 <font color=red/blue/green>（list_order_send 状态 / 买家卖家备注） --- */
body[data-theme="dark"] font[color="red"]    { color: #f87171 !important; }
body[data-theme="dark"] font[color="blue"]   { color: #7dd3fc !important; }
body[data-theme="dark"] font[color="green"]  { color: #4ade80 !important; }

/* --- 卡片内写死的深灰文字（浅色模式专用色，暗黑下必须提亮） --- */
body[data-theme="dark"] .form-label,
body[data-theme="dark"] .field-label,
body[data-theme="dark"] .field-val,
body[data-theme="dark"] .info-label,
body[data-theme="dark"] .info-value,
body[data-theme="dark"] .order-id,
body[data-theme="dark"] .summary-val {
    color: var(--fs-text) !important;
}
body[data-theme="dark"] .time-info,
body[data-theme="dark"] .info-col h4 {
    color: var(--fs-text-soft) !important;
}
body[data-theme="dark"] .info-col {
    border-right-color: var(--fs-border) !important;
}

/* --- list_order_detail.php：.detail-card / .table-custom / .table-footer / .well --- */
body[data-theme="dark"] .detail-card {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
body[data-theme="dark"] .detail-card-header {
    background-color: #0b1220 !important;
    color: var(--fs-text) !important;
    border-bottom-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table-custom th {
    background-color: #0b1220 !important;
    color: var(--fs-text-soft) !important;
    border-bottom-color: var(--fs-border-strong) !important;
}
body[data-theme="dark"] .table-custom td {
    color: var(--fs-text) !important;
    border-bottom-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table-custom tr:hover td {
    background-color: #2a3d53 !important;
}
body[data-theme="dark"] .table-footer {
    background-color: rgba(251,191,36,0.10) !important;
    color: #fbbf24 !important;
    border-top-color: var(--fs-border) !important;
}
body[data-theme="dark"] .well {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
    color: var(--fs-text) !important;
}
/* 行内 #f0f0f0 状态行（Map_Product）文字色也一并提亮（背景已被上面规则映射） */
body[data-theme="dark"] tr[style*="#f0f0f0" i] {
    color: var(--fs-text-soft) !important;
}

/* --- list_pay.php：行内 #f8f9fa 浅色搜索框 + bootstrap tr.info 汇总行 --- */
body[data-theme="dark"] div[style*="#f8f9fa" i] {
    background-color: var(--fs-bg-card) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .table > tbody > tr.info > td {
    background-color: #2a3d53 !important;
}

/* --- list_order_send.php：导航 tab + 物流块行内浅底 --- */
body[data-theme="dark"] .nav-tabs-custom {
    border-bottom-color: var(--fs-border) !important;
}
body[data-theme="dark"] .nav-tabs-custom a {
    color: var(--fs-text-soft) !important;
}
body[data-theme="dark"] .nav-tabs-custom a:hover,
body[data-theme="dark"] .nav-tabs-custom a.active {
    color: var(--fs-link) !important;
    border-bottom-color: var(--fs-link) !important;
}
body[data-theme="dark"] span.wuliu-block[style*="#ffaaff" i] { background-color: #6d3a6d !important; }
body[data-theme="dark"] span.wuliu-block[style*="#aaffff" i] { background-color: #12333d !important; }

/* --- 分页条 mj_pagefoot_green：黑字/深蓝字在深底上不可读 --- */
body[data-theme="dark"] .mj_pagefoot_green a {
    color: var(--fs-link) !important;
    border-color: var(--fs-border) !important;
}
body[data-theme="dark"] .mj_pagefoot_green span.current {
    color: var(--fs-text) !important;
}
body[data-theme="dark"] .mj_pagefoot_green span.info {
    color: var(--fs-text-soft) !important;
}

/* ============================================================
 * 2026-10-22 v5：list_order_unbill.php 对比度修复
 * 1) Bootstrap4 .thead-light 浅灰表头 + 主题浅字 → 表头整行看不清
 * 2) 状态行行内背景用的是关键字色（yellow / #fda / red），
 *    不在 v2 行内色映射表（#ffff00 等）里
 * 3) 店铺/仓库列背景色来自数据库（可能白/浅色），行内浅底 + 浅字
 * 4) .btn-outline-info 青蓝字在深底上太暗
 * ============================================================ */

/* --- Bootstrap4 thead-light 表头染深 --- */
body[data-theme="dark"] .table thead th,
body[data-theme="dark"] .thead-light th {
    background-color: #0b1220 !important;
    border-bottom-color: var(--fs-border-strong) !important;
}

/* --- 状态行关键字色映射（生成处：style='background-color:$bgcolor'，无空格） --- */
body[data-theme="dark"] tr[style*="background-color:yellow" i] > td { background-color: #6b5900 !important; }
body[data-theme="dark"] tr[style*="background-color:#fda" i]  > td { background-color: #705200 !important; }
body[data-theme="dark"] tr[style*="background-color:red" i]    > td { background-color: #5c1f1f !important; }
/* .hilite 高亮（同 #fda 浅橙） */
body[data-theme="dark"] .hilite {
    background-color: #705200 !important;
}

/* --- 行内带背景色的 td（店铺色/仓库色等数据库色值，深浅不可控）：
     用半透明深色渐变叠在原 background-color 之上（background-image 与
     background-color 不冲突），保一点原色调的同时保证浅字可读 --- */
body[data-theme="dark"] td[style*="background-color" i] {
    background-image: linear-gradient(rgba(11,18,32,0.82), rgba(11,18,32,0.82)) !important;
}

/* --- .btn-outline-info：青蓝字提亮 --- */
body[data-theme="dark"] .btn-outline-info {
    color: #7dd3fc !important;
    border-color: rgba(125,211,252,0.55) !important;
}