/* ── 业务看板 · 共享响应式基础样式 ───────────────────
   亮色页面 class="theme-light" / 暗色页面 class="theme-dark"
   所有组件规则 scoped 在 .theme-light 下，不冲突暗色页面
   响应式：640px(手机) / 1024px(平板) / 1200px(大屏)
   ────────────────────────────────────────────────── */

/* ====== Reset & Base ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;min-height:100vh}
.theme-light{background:#f0f2f5;color:#333}
.theme-dark{background:#0f1419;color:#e7e9ea}

/* ====== 统一导航栏（新版：汉堡 + 抽屉） ====== */
#topnav{display:flex!important;align-items:center;height:52px;padding:0 16px;background:inherit;box-shadow:0 1px 3px rgba(0,0,0,.08);position:sticky;top:0;z-index:100;gap:14px}
#topnav .hamburger{width:36px;height:36px;border:none;background:0 0;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px;border-radius:6px;flex-shrink:0}
#topnav .hamburger:hover{background:#f0f2f5}
#topnav .hamburger span{display:block;height:2px;background:#555;border-radius:1px;transition:all .2s}
#topnav .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#topnav .hamburger.open span:nth-child(2){opacity:0}
#topnav .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#topnav .nav-brand{font-size:16px;font-weight:700;text-decoration:none;flex-shrink:0}
.theme-light #topnav .nav-brand{color:#1a1a2e}
.theme-dark #topnav .nav-brand{color:#f0f2f5}
#topnav .nav-user{margin-left:auto;font-size:12px;color:#999;padding:4px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0}
.theme-light #topnav .nav-user{background:#f0f2f5}
.theme-dark #topnav .nav-user{background:#1a2733;color:#8899a6}

/* ====== 暗色主题基础组件 ====== */
.theme-dark .card,.theme-dark .stat-box{background:#16202a}
.theme-dark input,.theme-dark select,.theme-dark textarea{background:#16202a;color:#e7e9ea;border-color:#2a3341}
.theme-dark input:focus,.theme-dark select:focus{background:#1a2733}
.theme-dark table th{background:#1a2733;color:#aaa;border-color:#2a3341}
.theme-dark table td{border-color:#1a2733}
.theme-dark .btn{color:#e7e9ea}
.theme-dark .btn-gray{background:#2a3341;color:#aaa}

/* ══════════════════════════════════════════════════════
   亮色主题 · 组件系统
   ══════════════════════════════════════════════════════ */

.theme-light .container{max-width:1200px;margin:0 auto;padding:16px}
.theme-light .card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.theme-light .card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.theme-light .grid{display:grid;gap:12px}
.theme-light .grid-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.theme-light .grid-3{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.theme-light .grid-4{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.theme-light .grid-fill{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.theme-light .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.theme-light .stat-box{background:#fff;border-radius:10px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.theme-light .stat-box .num{font-size:24px;font-weight:700;color:#667eea}
.theme-light .stat-box .label{font-size:12px;color:#999;margin-top:4px}
.theme-light .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid #eee}
.theme-light .table-wrap table{min-width:600px;width:100%;border-collapse:collapse;font-size:13px}
.theme-light .table-wrap th{position:sticky;top:0;background:#f8f9fa;padding:10px 12px;text-align:left;font-weight:600;color:#555;border-bottom:2px solid #e5e7eb;white-space:nowrap}
.theme-light .table-wrap td{padding:10px 12px;border-bottom:1px solid #f3f4f6;white-space:nowrap}
.theme-light .table-wrap tr:hover td{background:#f8f9ff}
.theme-light .btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.theme-light .btn:active{transform:scale(.97)}
.theme-light .btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5a6fd6}
.theme-light .btn-green{background:#10b981;color:#fff}.btn-green:hover{background:#059669}
.theme-light .btn-red{background:#ef4444;color:#fff}.btn-red:hover{background:#dc2626}
.theme-light .btn-gray{background:#e5e7eb;color:#666}.btn-gray:hover{background:#d1d5db}
.theme-light .btn-sm{padding:4px 10px;font-size:12px}
.theme-light .btn-lg{padding:12px 24px;font-size:16px}
.theme-light .btn-block{width:100%;justify-content:center}
.theme-light input,.theme-light select,.theme-light textarea{padding:8px 12px;border:1px solid #d9d9d9;border-radius:6px;font-size:14px;outline:none;transition:border-color .15s;background:#fff;color:#333}
.theme-light input:focus,.theme-light select:focus,.theme-light textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}
.theme-light select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}

/* ====== 弹窗/遮罩 ====== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:#fff;border-radius:16px;width:min(600px,95vw);max-height:85vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.15);animation:slideUp .25s}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{position:sticky;top:0;background:#fff;padding:14px 18px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;z-index:1}
.modal-header h3{font-size:16px;margin:0}
.modal-body{padding:18px}
.modal-close{width:32px;height:32px;border:none;background:#f0f2f5;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666}
.modal-close:hover{background:#e5e7eb;color:#333}

/* ====== Toast ====== */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:8px;font-size:14px;z-index:999;display:none;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:toastIn .3s}
.toast.show{display:block}
.toast.ok{background:#ecfdf5;color:#065f46}
.toast.err{background:#fef2f2;color:#991b1b}
.toast.info{background:#eff6ff;color:#1e40af}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ====== 通用工具类 ====== */
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;display:inline-block}
.badge-p0{background:#fef2f2;color:#dc2626}
.badge-p1{background:#fef3c7;color:#d97706}
.badge-p2{background:#e5e7eb;color:#6b7280}
.badge-todo{background:#f3f4f6;color:#9ca3af}
.badge-doing{background:#dbeafe;color:#2563eb}
.badge-done{background:#d1fae5;color:#059669}
.badge-cancel{background:#fee2e2;color:#dc2626}
.tag{display:inline-flex;align-items:center;gap:4px;background:#667eea15;color:#667eea;padding:3px 10px;border-radius:12px;font-size:12px;cursor:pointer}.tag:hover{background:#667eea25}
.theme-light .pagination{display:flex;gap:4px;justify-content:center;margin-top:16px;flex-wrap:wrap;align-items:center}
.theme-light .pg-btn{padding:6px 12px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;transition:all .15s;min-width:32px;text-align:center}
.theme-light .pg-btn:hover{background:#f0f2ff}
.theme-light .pg-btn.active{background:#667eea;color:#fff;border-color:#667eea}
.theme-light .pg-btn:disabled{opacity:.3;cursor:default}
.empty-state{text-align:center;padding:48px 0;font-size:14px}.empty-state .icon{font-size:48px;margin-bottom:12px;display:block}
.theme-light .empty-state{color:#bbb}
.theme-dark .empty-state{color:#555}
.profit-pos{color:#27ae60;font-weight:600}
.profit-neg{color:#e74c3c;font-weight:600}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.theme-light .skeleton-cell{height:14px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear}

/* ========================
   响应式断点（两种主题通用）
   ======================== */

/* 平板 */
@media (max-width: 1024px) {
  .container{padding:12px!important}
  .theme-light .grid,.theme-light .grid-2,.theme-light .grid-3,.theme-light .grid-4,.theme-light .grid-fill{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
}

/* 手机 */
@media (max-width: 640px) {
  html{font-size:15px}
  #topnav{padding:0 8px!important;height:46px!important;gap:4px!important}
  #topnav .nav-brand{font-size:15px}
  #topnav .nav-links a{font-size:12px;padding:4px 8px}
  .container{padding:8px!important}
  .theme-light .card{margin-bottom:10px;padding:12px;border-radius:8px}
  .theme-light .stats-row{gap:6px}
  .theme-light .stat-box{padding:10px 8px}
  .theme-light .stat-box .num{font-size:20px}
  .theme-light .grid,.theme-light .grid-2,.theme-light .grid-3,.theme-light .grid-4,.theme-light .grid-fill{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px}
  .theme-light .table-wrap{font-size:12px;border-radius:6px}
  .theme-light .table-wrap th,.theme-light .table-wrap td{padding:6px 8px;font-size:11px}
  .theme-light .btn{padding:8px 12px;font-size:13px}
  .theme-light .btn-sm{padding:4px 8px;font-size:11px}
  .modal{width:100vw!important;border-radius:16px 16px 0 0!important}
  .theme-light .pg-btn{padding:4px 8px;font-size:11px;min-width:28px}
  /* 16px font 防 iOS 自动缩放 */
  .theme-light input,.theme-light select,.theme-light textarea{font-size:16px!important}
  .hide-mobile{display:none!important}
}

/* 大屏 */
@media (min-width: 1200px) {
  .container{padding:24px}
  .theme-light .card{padding:20px;border-radius:12px}
  .hide-desktop{display:none!important}
}

/* 触摸设备 */
@media (hover: none) and (pointer: coarse) {
  .btn:active,.card:active,.pg-btn:active{opacity:.8}
  a{padding:2px 0}
}