/* ====== 高坝中心村驻村工作队 · 伙食费管理系统 ====== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f0f2f5;
  --surface:#fff;
  --primary:#1a73e8;
  --primary-dark:#1557b0;
  --danger:#d93025;
  --danger-dark:#a50e0e;
  --success:#188038;
  --warning:#e37400;
  --text:#202124;
  --text-secondary:#5f6368;
  --text-muted:#9aa0a6;
  --border:#dadce0;
  --border-light:#e8eaed;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:0 4px 24px rgba(0,0,0,0.14);
  --radius:8px;
  --sidebar-w:240px;
}

html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;color:var(--text);background:var(--bg)}

.app-container{display:flex;height:100%}

/* ====== 侧边栏 ====== */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:#1e293b;color:#e2e8f0;
  display:flex;flex-direction:column;overflow-y:auto;
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,0.08)}
.brand-icon{font-size:30px}
.brand-text h1{font-size:15px;font-weight:700;color:#fff;margin-bottom:2px}
.brand-text p{font-size:11px;color:#94a3b8}

.sidebar-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.nav-btn{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border:none;border-radius:6px;background:transparent;
  color:#cbd5e1;font-size:13px;cursor:pointer;
  transition:all 0.15s;text-align:left;font-family:inherit;
}
.nav-btn:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-btn.active{background:var(--primary);color:#fff;font-weight:600}

.sidebar-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:6px}
.sb-village{font-size:10px;color:#94a3b8;margin-bottom:0}
.sb-label{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.sb-value{font-size:22px;font-weight:700;color:#fff}
.sidebar-action-btn{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:7px 10px;border:1px solid rgba(255,255,255,0.12);border-radius:6px;
  background:rgba(255,255,255,0.04);color:#cbd5e1;font-size:11px;
  cursor:pointer;font-family:inherit;transition:all 0.15s;
}
.sidebar-action-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.sidebar-reset-btn{color:#f28b82;border-color:rgba(217,48,37,0.3)}
.sidebar-reset-btn:hover{background:rgba(217,48,37,0.2);color:#f28b82}

/* ====== 主内容 ====== */
.main-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px}

.page{display:none;flex-direction:column;gap:20px}
.page.active{display:flex}

.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.page-header h2{font-size:19px;font-weight:700}
.header-date{font-size:13px;color:var(--text-secondary)}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ====== 统计卡 ====== */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:var(--surface);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.sc-icon{font-size:28px}
.sc-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.sc-value{font-size:22px;font-weight:700;color:var(--text)}
.stat-card.income .sc-value{color:var(--success)}
.stat-card.expense .sc-value{color:var(--danger)}
.stat-card.balance .sc-value{color:var(--primary)}

/* ====== 仪表盘网格 ====== */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.dash-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border-light);padding:18px}
.dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-card-header h3{font-size:14px;font-weight:600}

.chart-wrap{position:relative;width:100%;height:220px}
.chart-wrap canvas{width:100%!important;height:100%!important}
.chart-tall{height:300px}
.chart-container{position:relative;width:100%;min-height:220px}

/* 最近交易列表 */
.recent-list{display:flex;flex-direction:column;max-height:260px;overflow:hidden}
.recent-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-light);font-size:13px;gap:10px}
.recent-item:last-child{border-bottom:none}
.recent-item .ri-date{color:var(--text-muted);font-size:12px;min-width:75px;flex-shrink:0}
.recent-item .ri-item{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-item .ri-amount{font-weight:600;white-space:nowrap;flex-shrink:0}
.recent-item .ri-amount.in{color:var(--success)}
.recent-item .ri-amount.out{color:var(--danger)}
.recent-item .ri-notes{font-size:11px;color:var(--text-muted);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}

/* ====== 筛选栏 ====== */
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-input{flex:1;min-width:160px;padding:7px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;font-family:inherit}
.filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,0.1)}
.filter-date{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;font-family:inherit;width:130px}
.filter-date:focus{border-color:var(--primary)}
.filter-sep{color:var(--text-muted);font-size:12px}
.filter-select{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;font-family:inherit;background:#fff}

/* ====== 表格 ====== */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table thead{position:sticky;top:0;z-index:1}
.data-table th{background:#f8f9fa;padding:10px 12px;text-align:left;font-weight:600;font-size:12px;color:var(--text-secondary);border-bottom:2px solid var(--border);white-space:nowrap;user-select:none}
.data-table td{padding:8px 12px;border-bottom:1px solid var(--border-light)}
.data-table tbody tr:hover{background:#f8f9ff}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table .td-expense{color:var(--danger);font-weight:600;text-align:right}
.data-table .td-income{color:var(--success);font-weight:600;text-align:right}
.data-table .td-notes{color:var(--text-secondary);font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table .td-actions{display:flex;gap:6px}
.data-table .td-actions button{padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:#fff;cursor:pointer;font-size:11px;font-family:inherit}
.data-table .td-actions .btn-edit{color:var(--primary)}
.data-table .td-actions .btn-edit:hover{background:#e8f0fe;border-color:var(--primary)}
.data-table .td-actions .btn-del{color:var(--danger)}
.data-table .td-actions .btn-del:hover{background:#fce8e6;border-color:var(--danger)}
.empty-row td{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}

/* ====== 分页 ====== */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;flex-wrap:wrap}
.pagination button{padding:5px 12px;border:1px solid var(--border);border-radius:4px;background:#fff;cursor:pointer;font-size:12px;font-family:inherit}
.pagination button:hover{background:#f1f3f4}
.pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-info{font-size:12px;color:var(--text-secondary)}

/* ====== 按钮 ====== */
.btn-primary{padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.15s}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{padding:8px 16px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit}
.btn-secondary:hover{background:#f1f3f4}
.btn-danger{padding:8px 16px;background:var(--danger);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-danger:hover{background:var(--danger-dark)}
.btn-sync{padding:8px 16px;background:var(--success);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.15s}
.btn-sync:hover{background:#146a2e}
.btn-sm{padding:4px 10px;font-size:12px}

/* ====== 弹窗 ====== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:rgba(0,0,0,0.4);display:none !important;align-items:center;justify-content:center}
.modal-overlay.show{display:flex !important}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;width:500px;max-width:92vw;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-sm{width:400px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-light)}
.modal-header h3{font-size:16px;font-weight:700}
.modal-close{width:28px;height:28px;border:none;background:none;font-size:18px;cursor:pointer;color:var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:#f1f3f4;color:var(--text)}
.modal-body{padding:20px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border-light)}

.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.required{color:var(--danger)}
.form-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;outline:none;font-family:inherit}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,0.1)}
.form-textarea{resize:vertical;min-height:50px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 密码弹窗 */
.pwd-hint{font-size:12px;color:var(--text-secondary);line-height:1.6;margin-bottom:14px}
.pwd-error{font-size:12px;color:var(--danger);margin-top:4px;min-height:18px}

/* 确认弹窗 */
.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1100;background:rgba(0,0,0,0.5);display:none !important;align-items:center;justify-content:center}
.confirm-overlay.show{display:flex !important}
.confirm-dialog{background:#fff;border-radius:12px;padding:28px;text-align:center;width:380px;max-width:90vw;box-shadow:var(--shadow-lg)}
.confirm-icon{font-size:40px;margin-bottom:12px}
.confirm-dialog h4{font-size:16px;margin-bottom:8px}
.confirm-dialog p{font-size:13px;color:var(--text-secondary);margin-bottom:20px}
.confirm-buttons{display:flex;justify-content:center;gap:10px}

/* ====== 警告提示条 ====== */
.warning-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fef7e0;border:1px solid #fdd663;border-radius:var(--radius);font-size:12px;color:var(--warning);margin-bottom:8px}
.warning-bar .wb-close{margin-left:auto;cursor:pointer;background:none;border:none;font-size:14px;color:var(--warning)}

/* ====== 响应式 ====== */
@media (max-width:900px){
  .app-container{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:8px 12px;overflow:hidden}
  .sidebar-brand{padding:0;border:none;gap:6px}
  .brand-icon{font-size:20px}
  .brand-text h1{font-size:13px}
  .brand-text p{display:none}
  .sidebar-nav{flex-direction:row;padding:0 8px;gap:2px}
  .nav-btn{padding:6px 10px;font-size:12px}
  .sidebar-footer{display:none}
  .main-content{padding:14px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start}
  .header-actions{width:100%}
  .header-actions .btn-primary,.header-actions .btn-secondary{flex:1;text-align:center}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-input,.filter-date,.filter-select{width:100%}
  .form-row-2{grid-template-columns:1fr}
  .modal-overlay{padding:10px}
  .chart-wrap{height:200px}.chart-tall{height:240px}
}

@media (max-width:480px){
  .stat-cards{grid-template-columns:1fr}
  .stat-card{padding:14px}
  .sc-value{font-size:18px}
  .data-table{font-size:11px}
  .data-table th,.data-table td{padding:6px 8px}
   .chart-wrap{height:180px}.chart-tall{height:200px}
}

/* ====== 纯 CSS 柱状图（月度趋势） ====== */
.bar-chart{width:100%;padding:4px 0}
.bar-canvas{display:flex;align-items:flex-end;gap:3px;height:220px;padding:0 6px 28px 6px;border-bottom:1px solid var(--border);position:relative}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:12px;position:relative}
.bar-pair{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%;justify-content:center}
.bar{width:42%;min-width:6px;border-radius:3px 3px 0 0;transition:height 0.4s ease;position:relative;cursor:pointer;min-height:2px}
.bar-income{background:var(--success)}
.bar-expense{background:var(--danger)}
.bar:hover{opacity:0.75}
.bar span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:var(--text-secondary);display:none;font-weight:600}
.bar:hover span{display:block}
.bar-mlabel{font-size:10px;color:var(--text-muted);margin-top:6px;white-space:nowrap;transform:rotate(-30deg);transform-origin:top left;margin-left:6px}
.bar-legend{display:flex;justify-content:center;gap:20px;margin-top:4px;font-size:11px;color:var(--text-secondary)}
.bar-legend-income{color:var(--success)}
.bar-legend-expense{color:var(--danger)}
.chart-empty{padding:40px;text-align:center;color:var(--text-muted);font-size:13px}

/* ====== 纯 SVG 环形图（收支构成） ====== */
.donut-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0}
.donut-wrap svg{max-width:200px;width:100%}
.donut-wrap circle{transition:stroke-dasharray 0.6s ease}

@media (max-width:900px){
  .bar-canvas{height:170px;padding-bottom:30px}
  .bar-mlabel{font-size:9px}
}
@media (max-width:480px){
  .bar-canvas{height:140px;padding-bottom:28px;gap:1px}
  .bar{width:46%;min-width:4px}
}