/* ============================================================
 * 「陈酿·陶坛」纯视觉重构层 v1.2（2026-08-17）
 * ============================================================
 * 牛栏山管理系统 —— 库房夜班调度的陈酿视觉语言
 * v1.1：修复白天(light)主题 —— 语义变量按主题分开覆盖，
 *       鎏金为主色（品牌正确）、陶赤降为点缀、双主题全部协调。
 * v1.2：修复白天模式顶栏「白底浅字」—— light 块补齐整套
 *       --header-* 变量（文字/数字/按钮底/按钮字），原默认值
 *       是为深色顶栏设计的浅奶油色，白底上完全不可见。
 *
 * 纯视觉重构：仅覆写颜色 / 字体 / 圆角 / 阴影 / 层级，
 * 零功能改动、零布局改动、零 JS 改动（移除本文件即还原）。
 * ============================================================ */

/* ============================================================
 * ① L1 原料（色阶原子）—— 深/浅两套主题共用的原料
 * ============================================================ */
:root {
    /* 墨玉 / 檀漆 表面（深色基底） */
    --nl-char-1200: #14110B;
    --nl-char-1100: #1B1610;
    --nl-char-1000: #221C14;
    --nl-char-900:  #292118;
    --nl-char-800:  #31271B;
    --nl-char-700:  #392D20;
    --nl-char-600:  #483A27;
    --nl-char-500:  #5B4B31;

    /* 宣纸 文字（深色文字） */
    --nl-cream-100: #F1E8D4;
    --nl-cream-200: #C9BA9A;
    --nl-cream-300: #9F8F70;

    /* 暖纸表面（浅色基底）—— 保持系统宣纸白，稍暖 */
    --nl-paper-0:   #FFFFFF;
    --nl-paper-50:  #FDFBF6;
    --nl-paper-100: #F9F6EF;
    --nl-paper-200: #F2EDE2;
    --nl-paper-300: #EAE3D4;
    --nl-paper-400: #E0D8C6;
    --nl-paper-500: #C7BDA4;

    /* 墨褐 文字（浅色文字） */
    --nl-umber-100: #2B241A;
    --nl-umber-200: #57493B;
    --nl-umber-300: #6C5D4B;
    --nl-umber-400: #7F6D57;
    --nl-umber-500: #8C795F;
    --nl-umber-600: #988469;

    /* 鎏金 主色（品牌色，深色偏亮 / 浅色用深金） */
    --nl-gold-300: #EBC98E;
    --nl-gold-400: #DFB468;
    --nl-gold-500: #C29038;
    --nl-gold-600: #A87A2C;
    --nl-gold-700: #8A6220;
    --nl-gold-800: #755318;
    --nl-gold-900: #5F4312;
    --nl-gold-alpha-10: rgba(223, 180, 104, 0.10);
    --nl-gold-alpha-14: rgba(223, 180, 104, 0.14);
    --nl-gold-alpha-16: rgba(223, 180, 104, 0.16);
    --nl-gold-alpha-32: rgba(223, 180, 104, 0.32);
    --nl-gold-alpha-70: rgba(223, 180, 104, 0.70);

    /* 琥珀酒液（强调，双主题可读） */
    --nl-ambar-300: #F2C97F;
    --nl-ambar-400: #E5AC55;
    --nl-ambar-500: #C98B33;
    --nl-ambar-600: #AE7020;
    --nl-ambar-700: #8E5717;

    /* 陶坛赤（点缀/警示级强调，不抢主色） */
    --nl-terra-300: #DA7D51;
    --nl-terra-400: #C25E36;
    --nl-terra-500: #A64A28;
    --nl-terra-600: #8A3B1E;
    --nl-terra-alpha-16: rgba(198, 94, 54, 0.16);
    --nl-terra-alpha-28: rgba(198, 94, 54, 0.28);

    /* 功能色（微调更陈） */
    --nl-green-300: #8FEBB0;
    --nl-green-400: #5CDB8B;
    --nl-green-500: #36B768;
    --nl-amber-300: #F7D070;
    --nl-amber-400: #F0B94A;
    --nl-red-300:   #F8A5A0;
    --nl-red-400:   #EF6B64;
}

/* ============================================================
 * ② 深色模式语义层（默认，无 data-theme 时）
 * ============================================================ */
:root:not([data-theme="light"]) {
    --bg-primary:   var(--nl-char-1200);
    --bg-secondary: var(--nl-char-1100);
    --bg-elevated:  var(--nl-char-1000);
    --surface:      var(--nl-char-1100);
    --card-bg:      var(--nl-char-1000);
    --header-bg:    var(--nl-char-1100);
    --input-bg:     var(--nl-char-900);
    --text-primary:   var(--nl-cream-100);
    --text-secondary: var(--nl-cream-200);
    --text-muted:     var(--nl-cream-300);

    /* 主行动 = 鎏金（品牌）；强调 = 琥珀；陶赤作点缀 */
    --accent: var(--nl-ambar-400);
    --accent-hover: var(--nl-ambar-300);
    --primary: var(--nl-gold-400);
    --primary-hover: var(--nl-gold-300);
    --primary-dark: var(--nl-gold-600);
    --primary-light: var(--nl-gold-300);

    --border:        var(--nl-gold-alpha-16);
    --border-strong: var(--nl-gold-alpha-32);
    --border-color:  var(--nl-gold-alpha-16);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --font-display: 'ZCOOL XiaoWei', 'Ma Shan Zheng', 'Microsoft YaHei', serif;
    --font-serif:   'ZCOOL XiaoWei', 'STSong', 'SimSun', serif;
}

/* ============================================================
 * ③ 白天（light）语义层 —— 宣纸白 + 墨褐文字 + 深金/陶赤
 * ============================================================ */
[data-theme="light"] {
    --bg-primary:   #F9F6EF;
    --bg-secondary: #FFFFFF;
    --bg-elevated:  #FFFFFF;
    --surface:      #F2EDE2;
    --card-bg:      #FFFFFF;
    --card-bg-hover:#FDFBF6;
    --input-bg:     #F2EDE2;
    --input-bg-hover:#EAE3D4;
    --option-bg:    #FFFFFF;
    --option-color: #2B241A;
    --border:       #E0D8C6;
    --border-strong:#C7BDA4;
    --border-color: #E0D8C6;

    --text-primary:   #2B241A;
    --text-secondary: #57493B;
    --text-muted:     #7F6D57;

    /* 白天模式信息色加深：原 --info 浅蓝(#7FB4E8) 白字几乎不可读 */
    --info:       #3E63C4;
    --info-light: #5B7FD4;

    /* v1.2 顶栏整套变量：light 顶栏为宣纸白，全部内部文字换深色，
       否则原默认浅奶油值(#F1E8D4)在白底上完全不可见 */
    --header-bg:      #FFFFFF;
    --header-text:    #2B241A;
    --header-num:     var(--nl-gold-700);
    --header-stat-bg: #F2EDE2;
    --header-btn-bg:  #F4EFE3;
    --header-btn-text:#2B241A;

    /* 白天用深金做主行动（白字达标），深琥珀作强调，陶赤点缀 */
    --accent: var(--nl-ambar-700);
    --accent-hover: var(--nl-ambar-600);
    --primary: var(--nl-gold-700);
    --primary-hover: var(--nl-gold-600);
    --primary-dark: var(--nl-gold-800);
    --primary-light: var(--nl-gold-600);

    --on-accent: #FFFFFF;

    --shadow-sm: 0 1px 3px rgba(120, 100, 70, 0.12), 0 2px 8px rgba(120, 100, 70, 0.06);
    --shadow-md: 0 2px 6px rgba(120, 100, 70, 0.08), 0 10px 26px rgba(120, 100, 70, 0.10);
    --shadow-lg: 0 4px 14px rgba(120, 100, 70, 0.10), 0 18px 44px rgba(120, 100, 70, 0.14);
    --shadow: 0 2px 6px rgba(120, 100, 70, 0.08), 0 10px 26px rgba(120, 100, 70, 0.10);
    --shadow-strong: 0 4px 14px rgba(120, 100, 70, 0.10), 0 18px 44px rgba(120, 100, 70, 0.14);
}

/* ============================================================
 * ④ 字体精修
 * ============================================================ */
body {
    font-family: 'Inter', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
    letter-spacing: 0.2px;
}
h1, h2, .modal-title {
    font-family: var(--font-display);
    letter-spacing: 0.6px;
}
.m002-logo-area,
.m002-sidebar-group-title,
.brand-title {
    font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', cursive;
    letter-spacing: 1.5px;
}

/* 数据数值：深色下琥珀数字，白天下深金数字 */
:root:not([data-theme="light"]) .stat-card .stat-value,
:root:not([data-theme="light"]) .dashboard-stat-value,
:root:not([data-theme="light"]) .stat-num,
:root:not([data-theme="light"]) td.num {
    color: var(--nl-ambar-300);
    font-variant-numeric: tabular-nums;
}
[data-theme="light"] .stat-card .stat-value,
[data-theme="light"] .dashboard-stat-value,
[data-theme="light"] .stat-num,
[data-theme="light"] td.num {
    color: var(--nl-gold-700);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * ⑤ 签名 · 顶栏「酒液渐变金线」（双主题同款）
 * ============================================================ */
.header,
.m002-topbar,
.top-header {
    position: relative;
}
.header::after,
.m002-topbar::after,
.top-header::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(229, 172, 85, 0.85) 18%,
        rgba(235, 201, 142, 0.95) 50%,
        rgba(198, 94, 54, 0.70) 82%,
        transparent);
    opacity: 0.9;
    pointer-events: none;
}

/* ============================================================
 * ⑥ 签名 · 侧栏激活项 = 烫金酒标（深/浅两版）
 * ============================================================ */
:root:not([data-theme="light"]) .m002-sidebar-item.active {
    background: linear-gradient(90deg,
        rgba(198, 94, 54, 0.26),
        rgba(229, 172, 85, 0.16) 55%,
        transparent 92%);
    border-left: 3px solid var(--nl-ambar-400);
    box-shadow:
        inset 0 0 16px rgba(229, 172, 85, 0.10),
        0 0 12px rgba(229, 172, 85, 0.06);
    color: #F6E7C8;
    text-shadow: 0 0 12px rgba(235, 201, 142, 0.35);
}
[data-theme="light"] .m002-sidebar-item.active {
    background: linear-gradient(90deg,
        rgba(198, 94, 54, 0.12),
        rgba(229, 172, 85, 0.18) 55%,
        transparent 92%);
    border-left: 3px solid var(--nl-gold-600);
    color: var(--nl-gold-800);
    box-shadow: inset 0 0 14px rgba(168, 122, 44, 0.10);
    font-weight: 600;
}
:root:not([data-theme="light"]) .m002-sidebar-item:hover {
    background: linear-gradient(90deg, rgba(229, 172, 85, 0.10), transparent 80%);
}
[data-theme="light"] .m002-sidebar-item:hover {
    background: rgba(223, 180, 104, 0.12);
}

/* ============================================================
 * ⑦ 组件精修（双主题）
 * ============================================================ */
/* 卡片 */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .m002-card,
:root:not([data-theme="light"]) .panel {
    border-color: rgba(223, 180, 104, 0.14);
    box-shadow: 0 2px 6px rgba(10, 6, 0, 0.35), 0 10px 26px rgba(10, 6, 0, 0.25);
}
[data-theme="light"] .card,
[data-theme="light"] .m002-card,
[data-theme="light"] .panel {
    border-color: #E0D8C6;
    box-shadow: 0 1px 3px rgba(120, 100, 70, 0.08), 0 8px 22px rgba(120, 100, 70, 0.08);
}

/* 主按钮：深色=鎏金渐变；白天=深金实底 */
:root:not([data-theme="light"]) .btn-primary,
:root:not([data-theme="light"]) .fa-btn-primary {
    background: linear-gradient(180deg, var(--nl-gold-500), var(--nl-gold-700));
    border-color: rgba(235, 201, 142, 0.4);
    color: #2A1E08;
    box-shadow: 0 2px 8px rgba(138, 98, 32, 0.35);
}
:root:not([data-theme="light"]) .btn-primary:hover,
:root:not([data-theme="light"]) .fa-btn-primary:hover {
    background: linear-gradient(180deg, var(--nl-gold-400), var(--nl-gold-600));
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .fa-btn-primary {
    background: var(--nl-gold-700);
    border-color: var(--nl-gold-700);
    color: #FFFFFF;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .fa-btn-primary:hover {
    background: var(--nl-gold-600);
}

/* 表格表头 */
:root:not([data-theme="light"]) table th {
    background: linear-gradient(180deg, rgba(229, 172, 85, 0.10), rgba(229, 172, 85, 0.04));
    color: var(--nl-ambar-300);
}
[data-theme="light"] table th {
    background: linear-gradient(180deg, rgba(223, 180, 104, 0.18), rgba(223, 180, 104, 0.08));
    color: var(--nl-gold-800);
}
:root:not([data-theme="light"]) table tbody tr:hover { background: rgba(229, 172, 85, 0.06); }
[data-theme="light"] table tbody tr:hover { background: rgba(223, 180, 104, 0.10); }

/* 输入框聚焦 */
input, select, textarea { caret-color: var(--accent); }
input:focus, select:focus, textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* 滚动条 */
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ============================================================
 * ⑧ v1.2 白天顶栏细节 —— 白底上环境监控条/卡片更分明
 * ============================================================ */
[data-theme="light"] #topHeader .hdr-env-row {
    background: color-mix(in srgb, #F4EFE3 55%, transparent);
    border-color: #E0D8C6;
}
[data-theme="light"] #topHeader .hdr-env-card {
    background: #FFFFFF;
    border-color: #DED5C2;
    box-shadow: 0 1px 2px rgba(120, 100, 70, 0.08);
}
[data-theme="light"] #topHeader .hdr-main-nav .hdr-nav-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(120, 100, 70, 0.08);
}

/* —— 管理按钮：light 下改用深色渐变（靛→深琥珀），保证白字可读 —— */
html[data-theme="light"]:not([data-style]) #topHeader .admin-more-btn {
    background: linear-gradient(135deg, #5B5FC7, #8E5717) !important;
    box-shadow: 0 2px 8px rgba(94, 88, 180, 0.35);
}
/* —— 管理按钮：深色模式原为浅蓝→浅金渐变+白字(≈1.9:1)，同修 —— */
html:not([data-theme="light"]):not([data-style]) #topHeader .admin-more-btn {
    background: linear-gradient(135deg, #6E72D6, #A87A2C) !important;
    box-shadow: 0 2px 8px rgba(110, 114, 214, 0.30);
}

/* —— 环境监控状态色：light 白底上原亮色(#FF7A6E/#06b6d4/#10b981)过浅，
      换深一档，保证小字号也 ≥4.5:1（覆盖 M007 的 html:not([data-style]) 规则） —— */
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-alert,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-alert i,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-alert .hdr-env-num,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp.alert-mode,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp.alert-mode i,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp.alert-mode .hdr-env-num {
    color: #B3261E;
}
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp i,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-temp .hdr-env-num {
    color: #0369A1;
}
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-sensor,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-sensor i,
html[data-theme="light"]:not([data-style]) #topHeader .hdr-env-sensor .hdr-env-num {
    color: #047857;
}

/* —— 用户徽章角色色：白天白底上原亮色渐变/文字过浅，换深一档 —— */
[data-theme="light"] .user-badge-role { color: #6C5D4B; }
[data-theme="light"] .user-badge.role-厂长 .user-badge-name {
    background: linear-gradient(180deg, #A87A2C 0%, #8A6220 55%, #755318 100%);
}
[data-theme="light"] .user-badge.role-副厂长 .user-badge-name {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 55%, #5B21B6 100%);
}
[data-theme="light"] .user-badge.role-部长 .user-badge-name {
    background: linear-gradient(135deg, #B45309 0%, #92400E 60%, #7C2D12 100%);
}
[data-theme="light"] .user-badge.role-副部长 .user-badge-name {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #1E40AF 100%);
}
[data-theme="light"] .user-badge.role-班长 .user-badge-name {
    background: linear-gradient(135deg, #10B981 0%, #059669 60%, #065F46 100%);
}
[data-theme="light"] .user-badge.role-副班长 .user-badge-name {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 60%, #115E59 100%);
}
[data-theme="light"] .user-badge.role-库管员 .user-badge-name,
[data-theme="light"] .user-badge.role-库管 .user-badge-name {
    color: #5B21B6;
}
[data-theme="light"] .user-badge.role-管理员 .user-badge-name {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 55%, #7F1D1D 100%);
    filter: drop-shadow(0 1px 1px rgba(127, 29, 29, 0.35));
}
/* 修复：light 主题下 background 简写会把 background-clip 重置为 border-box，
   导致渐变文字退化成「棕色块」（文字透明、背景整块铺色）。
   此处对使用渐变文字的各级角色重新声明文字裁剪与透明填充。 */
[data-theme="light"] .user-badge.role-厂长 .user-badge-name,
[data-theme="light"] .user-badge.role-副厂长 .user-badge-name,
[data-theme="light"] .user-badge.role-部长 .user-badge-name,
[data-theme="light"] .user-badge.role-副部长 .user-badge-name,
[data-theme="light"] .user-badge.role-班长 .user-badge-name,
[data-theme="light"] .user-badge.role-副班长 .user-badge-name,
[data-theme="light"] .user-badge.role-管理员 .user-badge-name {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="light"] .user-badge.role-厂长 .user-badge-role { color: #8A6220; }
[data-theme="light"] .user-badge.role-副厂长 .user-badge-role { color: #6D28D9; }
[data-theme="light"] .user-badge.role-部长 .user-badge-role { color: #92400E; }
[data-theme="light"] .user-badge.role-副部长 .user-badge-role { color: #1D4ED8; }
[data-theme="light"] .user-badge.role-管理员 .user-badge-role { color: #B91C1C; }