/* ============================================
 * NEPC 统一样式框架 v2.0
 * 配色基于中国能建品牌VI手册
 * ============================================ */

/* ---------- NEPC Brand Color Variables ---------- */
:root {
  /* 主色系 — 能建蓝 */
  --nepc-blue:        #0068B7;
  --nepc-blue-dark:   #00529C;
  --nepc-blue-deep:   #1A3C6E;
  --nepc-blue-light:  #E8F1F9;
  --nepc-blue-hover:  #005A9E;

  /* 强调色 */
  --nepc-red:         #E60012;
  --nepc-red-dark:    #CF0010;
  --nepc-red-light:   #FDEAEA;
  --nepc-gold:        #C0A55C;

  /* 灰色阶梯 */
  --nepc-gray-dark:   #4C4948;
  --nepc-gray:        #727171;
  --nepc-gray-light:  #C9CACA;
  --nepc-gray-bg:     #F5F4F0;
  --nepc-white:       #FFFFFF;

  /* 语义色（柔和版） */
  --nepc-success:     #2E8B57;
  --nepc-success-light:#EAF5EF;
  --nepc-warning:     #D4930A;
  --nepc-warning-light:#FDF6E3;
  --nepc-danger:      #E60012;
  --nepc-danger-light:#FDEAEA;
  --nepc-info:        #0068B7;
  --nepc-info-light:  #E8F1F9;

  /* 兼容旧变量 */
  --primary:          var(--nepc-blue);
  --primary-dark:     var(--nepc-blue-dark);

  /* 布局 */
  --radius:           8px;
  --radius-lg:        12px;
  --max-w:            1200px;
  --shadow:           0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:        0 4px 16px rgba(0,0,0,0.10);
  --header-h:         56px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; -webkit-text-size-adjust:100% }
body {
  font-family:-apple-system,'Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;
  background:var(--nepc-gray-bg); color:var(--nepc-gray-dark); min-height:100vh; line-height:1.6;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  padding-bottom:env(safe-area-inset-bottom,0)
}
a { color:var(--nepc-blue); text-decoration:none; transition:color .2s }
a:hover { color:var(--nepc-blue-hover); text-decoration:underline }
img { max-width:100%; height:auto }

/* ---------- Layout ---------- */
.container { max-width:var(--max-w); margin:0 auto; padding:16px }

/* ---------- Sidebar ---------- */
.sidebar { width:220px; background:#fff; border-right:1px solid var(--nepc-gray-light); min-height:100vh; position:fixed; left:0; top:0; padding-top:60px }
.main { margin-left:220px; padding:20px }

/* ---------- Cards ---------- */
.card {
  background:var(--nepc-white); border-radius:var(--radius-lg); padding:20px;
  box-shadow:var(--shadow); margin-bottom:16px;
  transition:transform .2s, box-shadow .2s
}
.card:hover { box-shadow:var(--shadow-lg) }
.card-header {
  font-size:15px; font-weight:600; color:var(--nepc-blue-deep);
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:2px solid var(--nepc-blue)
}
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px }

/* ---------- Stat Cards ---------- */
.stat-card {
  background:var(--nepc-white); border-radius:var(--radius-lg); padding:16px 20px; text-align:center;
  box-shadow:var(--shadow); border-left:4px solid var(--nepc-blue);
  transition:transform .2s
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.stat-card .num { font-size:28px; font-weight:700; color:var(--nepc-blue-deep) }
.stat-card .label { font-size:12px; color:var(--nepc-gray); margin-top:4px }
.stat-card.warning { border-left-color:var(--nepc-warning) }
.stat-card.danger { border-left-color:var(--nepc-red) }
.stat-card.success { border-left-color:var(--nepc-success) }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
table { width:100%; border-collapse:collapse; font-size:14px }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--nepc-gray-light); white-space:nowrap }
th { background:var(--nepc-blue-light); font-weight:600; color:var(--nepc-gray-dark); position:sticky; top:0; z-index:1 }
tr:hover td { background:var(--nepc-blue-light) }
td .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500 }

/* ---------- Status Badges — 柔和品牌色 ---------- */
.badge-todo { background:var(--nepc-info-light); color:var(--nepc-info) }
.badge-progress { background:var(--nepc-warning-light); color:var(--nepc-warning) }
.badge-done { background:var(--nepc-success-light); color:var(--nepc-success) }
.badge-overdue { background:var(--nepc-danger-light); color:var(--nepc-red) }
.badge-urgent { background:var(--nepc-danger-light); color:var(--nepc-red-dark) }
.badge-important { background:var(--nepc-warning-light); color:#B37A08 }
.badge-normal { background:#F0F0F0; color:var(--nepc-gray) }
.badge-low { background:var(--nepc-success-light); color:#237A47 }

/* ---------- Buttons — 品牌色系 ---------- */
.btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 16px; border-radius:var(--radius); border:1px solid var(--nepc-gray-light);
  font-size:13px; cursor:pointer; transition:all .2s; background:var(--nepc-white); color:var(--nepc-gray-dark)
}
.btn:hover { border-color:var(--nepc-blue); color:var(--nepc-blue); transform:translateY(-1px) }
.btn:active { transform:scale(0.97) }
.btn-primary { background:var(--nepc-blue); color:#fff; border-color:var(--nepc-blue) }
.btn-primary:hover { background:var(--nepc-blue-hover); color:#fff; border-color:var(--nepc-blue-hover) }
.btn-outline { background:var(--nepc-white); color:var(--nepc-blue); border-color:var(--nepc-blue) }
.btn-outline:hover { background:var(--nepc-blue-light) }
.btn-success { background:var(--nepc-success); color:#fff; border-color:var(--nepc-success) }
.btn-success:hover { background:#24704A; border-color:#24704A }
.btn-danger { background:var(--nepc-red); color:#fff; border-color:var(--nepc-red) }
.btn-danger:hover { background:var(--nepc-red-dark); border-color:var(--nepc-red-dark) }
.btn-warning { background:var(--nepc-warning); color:#fff; border-color:var(--nepc-warning) }
.btn-warning:hover { background:#B87E09; border-color:#B87E09 }
.btn-sm { padding:4px 10px; font-size:12px }

/* 兼容旧按钮类 */
.btn-p { background:var(--nepc-blue); color:#fff; border-color:var(--nepc-blue) }
.btn-p:hover { background:var(--nepc-blue-dark); color:#fff }
.btn-o { background:var(--nepc-white); color:var(--nepc-blue); border:1px solid var(--nepc-blue) }
.btn-o:hover { background:var(--nepc-blue-light) }
.btn-d { background:var(--nepc-red); color:#fff; border:1px solid var(--nepc-red) }
.btn-d:hover { background:var(--nepc-red-dark) }
.btn-g { background:var(--nepc-success); color:#fff; border:1px solid var(--nepc-success) }
.btn-g:hover { background:#24704A }
.btn-group { display:flex; gap:8px; flex-wrap:wrap }

/* ---------- Forms ---------- */
.form-group { margin-bottom:12px }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--nepc-gray); margin-bottom:4px }
.form-control {
  width:100%; padding:8px 12px; border:1px solid var(--nepc-gray-light); border-radius:var(--radius);
  font-size:14px; transition:border-color .2s, box-shadow .2s; background:var(--nepc-white); color:var(--nepc-gray-dark)
}
.form-control:focus { border-color:var(--nepc-blue); outline:none; box-shadow:0 0 0 3px rgba(0,104,183,0.1) }
.form-control::placeholder { color:var(--nepc-gray-light) }
select.form-control { appearance:auto }
textarea.form-control { resize:vertical; min-height:80px }

/* ---------- Modals ---------- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(26,60,110,0.45); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .3s
}
.modal-overlay.active { opacity:1; visibility:visible }
.modal-overlay.open { opacity:1; visibility:visible }
.modal-overlay.show { opacity:1; visibility:visible }
.modal {
  background:var(--nepc-white); border-radius:var(--radius-lg); padding:24px; max-width:520px;
  width:90%; max-height:80vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(0.95); transition:all .3s
}
.modal-overlay.active .modal,
.modal-overlay.active .modal,
.modal-overlay.show .modal,
.modal-overlay.open .modal { transform:translateY(0) scale(1) }
.modal h2 { font-size:16px; margin-bottom:16px; color:var(--nepc-blue-deep); padding-right:28px }
.modal-close { float:right; cursor:pointer; font-size:22px; color:var(--nepc-gray); background:none; border:none; transition:all .2s; padding:4px; line-height:1; border-radius:4px }
.modal-close:hover { color:var(--nepc-gray-dark); background:var(--nepc-gray-bg) }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; padding-top:12px; border-top:1px solid var(--nepc-gray-light) }

/* ---------- Pagination ---------- */
.pagination {
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:16px 0; font-size:13px
}
.pagination .page-btn {
  padding:5px 11px; border:1px solid var(--nepc-gray-light); border-radius:4px;
  cursor:pointer; background:var(--nepc-white); color:var(--nepc-gray-dark); transition:all .2s
}
.pagination .page-btn:hover { border-color:var(--nepc-blue); color:var(--nepc-blue) }
.pagination .page-btn.active { background:var(--nepc-blue); color:#fff; border-color:var(--nepc-blue) }
.pagination .page-btn:disabled { opacity:0.4; cursor:default }
.pagination .page-info { padding:0 8px; color:var(--nepc-gray) }

/* ---------- Search ---------- */
.search-box { position:relative; max-width:360px }
.search-box input {
  width:100%; padding:8px 36px 8px 12px; border:1px solid var(--nepc-gray-light);
  border-radius:20px; font-size:13px; transition:all .2s; background:var(--nepc-white)
}
.search-box input:focus { border-color:var(--nepc-blue); outline:none; box-shadow:0 0 0 3px rgba(0,104,183,0.1) }
.search-box .icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--nepc-gray-light) }

/* ---------- Toast / Notification — 品牌色 ---------- */
.toast {
  position:fixed; top:20px; right:20px; z-index:2000;
  padding:12px 20px; border-radius:var(--radius); font-size:14px;
  box-shadow:var(--shadow-lg);
  transform:translateX(120%); transition:transform .3s
}
.toast.show { transform:translateX(0) }
.toast-success { background:var(--nepc-success-light); color:var(--nepc-success); border:1px solid #A3D9B8 }
.toast-error { background:var(--nepc-danger-light); color:var(--nepc-red-dark); border:1px solid #F5B7B7 }
.toast-info { background:var(--nepc-info-light); color:var(--nepc-info); border:1px solid #91C5E8 }
.toast-warning { background:var(--nepc-warning-light); color:var(--nepc-warning); border:1px solid #E8C97A }

/* ---------- Loading Spinner ---------- */
.spinner {
  width:32px; height:32px; border:3px solid var(--nepc-gray-light);
  border-top:3px solid var(--nepc-blue); border-radius:50%;
  animation:spin .8s linear infinite; margin:20px auto
}
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ---------- Empty State ---------- */
.empty-state {
  text-align:center; padding:56px 24px; color:var(--nepc-gray);
  animation:fadeIn .3s ease
}
.empty-state .icon { font-size:52px; margin-bottom:14px; opacity:0.4 }
.empty-state div:not(.icon) { font-size:14px; margin-top:6px }
.empty-state p { font-size:14px; margin-top:6px }
.empty-state .hint { font-size:12px; color:var(--nepc-gray-light); margin-top:8px }

/* ---------- Utility ---------- */
.flex { display:flex }
.flex-center { display:flex; align-items:center; justify-content:center }
.flex-between { display:flex; align-items:center; justify-content:space-between }
.flex-wrap { flex-wrap:wrap }
.gap-4 { gap:4px }; .gap-8 { gap:8px }; .gap-12 { gap:12px }; .gap-16 { gap:16px }
.mt-8 { margin-top:8px }; .mt-12 { margin-top:12px }; .mt-16 { margin-top:16px }
.mb-8 { margin-bottom:8px }; .mb-12 { margin-bottom:12px }; .mb-16 { margin-bottom:16px }
.text-center { text-align:center }
.text-right { text-align:right }
.text-muted { color:var(--nepc-gray); font-size:13px }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hidden { display:none !important }
.w-full { width:100% }
.tag { display:inline-block; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:500 }

/* ---------- Filter Bar ---------- */
.filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 0; margin-bottom:12px
}
.filter-bar select, .filter-bar input {
  padding:6px 10px; border:1px solid var(--nepc-gray-light); border-radius:var(--radius); font-size:13px
}
.filter-bar select:focus, .filter-bar input:focus { border-color:var(--nepc-blue); outline:none }

/* ---------- Responsive ---------- */
@media (max-width:768px) {
  .container { padding:12px }
  .card-grid { grid-template-columns:1fr }
  .filter-bar { flex-direction:column; align-items:stretch }
  .sidebar { display:none }
  .main { margin-left:0; padding:12px }
  .modal { width:95%; padding:16px }
  .stat-card .num { font-size:24px }
  .stat-card { padding:12px 14px }
  table { font-size:13px }
  th, td { padding:8px 8px }
}
@media (max-width:480px) {
  .container { padding:10px }
  table { font-size:12px }
  th, td { padding:6px 6px; white-space:normal }
  .stat-card .num { font-size:20px }
  .modal { padding:12px; border-radius:var(--radius) }
  .card { padding:14px; border-radius:var(--radius) }
}

/* ---------- Print ---------- */
@media print {
  .sidebar, .filter-bar, .btn, .pagination, .search-box { display:none !important }
  .main { margin-left:0; padding:0 }
  .card { box-shadow:none; border:1px solid #ddd }
}

/* ---------- NEPC Toast (common.js) ---------- */
.nepc-toast {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--radius);
  font-size:13px; pointer-events:auto;
  box-shadow:var(--shadow-lg);
  transform:translateX(120%); transition:transform .3s ease;
  max-width:380px; word-break:break-word
}
.nepc-toast.show { transform:translateX(0) }
.nepc-toast-icon {
  width:20px; height:20px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  flex-shrink:0
}
.nepc-toast-success { background:var(--nepc-success-light); color:var(--nepc-success); border:1px solid #A3D9B8 }
.nepc-toast-success .nepc-toast-icon { background:var(--nepc-success); color:#fff }
.nepc-toast-error { background:var(--nepc-danger-light); color:var(--nepc-red-dark); border:1px solid #F5B7B7 }
.nepc-toast-error .nepc-toast-icon { background:var(--nepc-red); color:#fff }
.nepc-toast-warning { background:var(--nepc-warning-light); color:var(--nepc-warning); border:1px solid #E8C97A }
.nepc-toast-warning .nepc-toast-icon { background:var(--nepc-warning); color:#fff }
.nepc-toast-info { background:var(--nepc-info-light); color:var(--nepc-info); border:1px solid #91C5E8 }
.nepc-toast-info .nepc-toast-icon { background:var(--nepc-blue); color:#fff }

/* ---------- NEPC Breadcrumb (AdminLTE pattern) ---------- */
.nepc-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 0; margin: 0 0 4px 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.4;
}
.nepc-breadcrumb li {
  display: flex; align-items: center;
  color: var(--nepc-gray-light, #c9caca);
}
.nepc-breadcrumb li + li::before {
  content: "›";
  padding: 0 6px;
  color: var(--nepc-gray-light, #c9caca);
  font-size: 13px;
  font-weight: 400;
}
.nepc-breadcrumb li a {
  color: var(--nepc-gray, #727171);
  text-decoration: none;
  transition: color .15s;
}
.nepc-breadcrumb li a:hover {
  color: var(--nepc-blue, #0068B7);
  text-decoration: none;
}
.nepc-breadcrumb li a:focus,
.nepc-breadcrumb li a:focus-visible {
  outline: none;
}
.nepc-breadcrumb li.active {
  color: var(--nepc-gray-dark, #4c4948);
  font-weight: 600;
  cursor: default;
}
.nepc-breadcrumb li.active a {
  color: var(--nepc-gray-dark, #4c4948);
  font-weight: 600;
  pointer-events: none;
  outline: none;
  border: none;
}

/* ============================================
 * NEPC Dark Mode (Bootstrap 5.3 data-bs-theme)
 * ============================================ */
[data-bs-theme="dark"] {
  /* ── 背景/前景反转 ── */
  --nepc-white:       #1e293b;
  --nepc-gray-bg:     #0f172a;
  --nepc-gray-dark:   #e2e8f0;
  --nepc-gray:        #94a3b8;
  --nepc-gray-light:  #334155;

  /* ── 品牌色保持 ── */
  --nepc-blue:        #3b82f6;
  --nepc-blue-dark:   #2563eb;
  --nepc-blue-light:  #1e3a5f;
  --nepc-blue-hover:  #60a5fa;

  /* ── 强调色 ── */
  --nepc-red-light:   #3b1a1a;
  --nepc-red-dark:    #fca5a5;
  --nepc-success-light:#1a3b2a;
  --nepc-warning-light:#3b2e1a;
  --nepc-danger-light:#3b1a1a;
  --nepc-info-light:  #1e3a5f;

  /* ── 阴影 ── */
  --shadow:           0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:        0 4px 16px rgba(0,0,0,0.4);

  /* ── 全局 ── */
  color-scheme: dark;
}

/* ── 全局覆盖 ── */
[data-bs-theme="dark"] body {
  background: var(--nepc-gray-bg);
  color: var(--nepc-gray-dark);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .dash-card,
[data-bs-theme="dark"] .table-wrap,
[data-bs-theme="dark"] .toolbar,
[data-bs-theme="dark"] .summary-bar {
  background: var(--nepc-white);
  border-color: var(--nepc-gray-light);
  color: var(--nepc-gray-dark);
}

[data-bs-theme="dark"] table th {
  background: #1e293b;
  color: #94a3b8;
}

[data-bs-theme="dark"] table td {
  border-color: var(--nepc-gray-light);
}

[data-bs-theme="dark"] tr:hover td {
  background: #1e3a5f;
}

[data-bs-theme="dark"] input,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}

[data-bs-theme="dark"] .nepc-breadcrumb li.active {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .nepc-breadcrumb li + li::before {
  color: #475569;
}

/* ── 切换按钮 ── */
.theme-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all .2s;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.2);
}

/* ── 独立页面暗色强制覆盖 ── */
[data-bs-theme="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
/* ── 骨架屏 (Skeleton Loading) ── */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
[data-bs-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-text.w60 { width: 60%; }
.skeleton-text.w80 { width: 80%; }
.skeleton-text.w40 { width: 40%; }
.skeleton-title {
  height: 20px;
  width: 50%;
  margin-bottom: 12px;
}
.skeleton-card {
  height: 80px;
  margin-bottom: 10px;
}
.skeleton-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
}