/* ===== 全局 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Microsoft YaHei','Segoe UI',sans-serif; font-size:14px; color:#333; background:#f0f2f5; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; font-size:14px; }
a { text-decoration:none; color:inherit; }

/* ===== 按钮 ===== */
.btn-primary { background:#1B5CFF; color:#fff; border:none; padding:8px 20px; border-radius:4px; font-size:14px; }
.btn-primary:hover { background:#0E4EE0; }
.btn-success { background:#07C160; color:#fff; border:none; padding:6px 16px; border-radius:4px; }
.btn-success:hover { background:#06A552; }
.btn-danger { background:#FA5151; color:#fff; border:none; padding:6px 16px; border-radius:4px; }
.btn-danger:hover { background:#E04545; }
.btn-warning { background:#FF9500; color:#fff; border:none; padding:6px 16px; border-radius:4px; }
.btn-outline { background:transparent; color:#1B5CFF; border:1px solid #1B5CFF; padding:6px 16px; border-radius:4px; }
.btn-outline:hover { background:#1B5CFF; color:#fff; }
.btn-sm { padding:4px 12px; font-size:13px; border-radius:4px; border:none; }
.btn-sm.btn-danger { background:#FA5151; color:#fff; }
.btn-sm.btn-primary { background:#1B5CFF; color:#fff; }
.btn-sm.btn-success { background:#07C160; color:#fff; }
.btn-sm.btn-outline { background:transparent; color:#1B5CFF; border:1px solid #1B5CFF; }

/* ===== 登录页 ===== */
.login-page { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1B5CFF 0%,#0a3aaf 100%); }
.login-box { width:400px; background:#fff; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,.2); overflow:hidden; }
.login-header { padding:40px 30px 20px; text-align:center; }
.login-logo { font-size:28px; font-weight:bold; color:#1B5CFF; letter-spacing:2px; }
.login-subtitle { font-size:14px; color:#999; margin-top:8px; }
.login-form { padding:0 30px 30px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; color:#666; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 12px; border:1px solid #d9d9d9; border-radius:4px; outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#1B5CFF; }
.login-error { color:#FA5151; font-size:13px; min-height:18px; margin-bottom:8px; }
.login-buttons { display:flex; gap:10px; }
.login-buttons .btn-primary { flex:1; padding:12px; font-size:16px; }
.login-hint { text-align:center; font-size:12px; color:#bbb; margin-top:16px; line-height:1.8; }
.server-status { text-align:center; font-size:12px; margin-top:10px; }
.server-status.ok { color:#07C160; }
.server-status.fail { color:#FA5151; }

/* ===== 主界面 ===== */
.main-page { width:100vw; height:100vh; display:flex; flex-direction:column; }

.topbar { height:56px; background:#1B5CFF; display:flex; align-items:center; justify-content:space-between; padding:0 24px; color:#fff; flex-shrink:0; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-title { font-size:18px; font-weight:bold; }
.topbar-version { font-size:12px; background:rgba(255,255,255,.2); padding:2px 8px; border-radius:3px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-user { font-size:14px; }
.topbar-right .btn-outline { color:#fff; border-color:rgba(255,255,255,.5); }
.topbar-right .btn-outline:hover { background:rgba(255,255,255,.2); }

.body-wrapper { flex:1; display:flex; overflow:hidden; }

/* ===== 侧边栏 ===== */
.sidebar { width:200px; background:#fff; border-right:1px solid #e8e8e8; overflow-y:auto; flex-shrink:0; }
.nav-group { margin-top:8px; }
.nav-group-title { font-size:12px; color:#999; padding:8px 20px 4px; text-transform:uppercase; letter-spacing:1px; }
.nav-item { padding:10px 20px; font-size:14px; color:#555; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all .15s; border-left:3px solid transparent; }
.nav-item:hover { background:#f5f7ff; color:#1B5CFF; }
.nav-item.active { background:#e8efff; color:#1B5CFF; font-weight:600; border-left-color:#1B5CFF; }
.nav-icon { font-size:12px; }

/* ===== 内容区 ===== */
.content { flex:1; overflow-y:auto; padding:20px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-title { font-size:20px; font-weight:600; color:#333; }
.page-actions { display:flex; gap:8px; align-items:center; }

/* ===== 卡片 ===== */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:8px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.stat-card-label { font-size:13px; color:#999; margin-bottom:8px; }
.stat-card-value { font-size:28px; font-weight:bold; }
.stat-card-value.blue { color:#1B5CFF; }
.stat-card-value.green { color:#07C160; }
.stat-card-value.red { color:#FA5151; }
.stat-card-value.orange { color:#FF9500; }
.stat-card-sub { font-size:12px; color:#bbb; margin-top:6px; }

/* ===== 表格 ===== */
.table-wrapper { background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.table-scroll { overflow:auto; max-height:calc(100vh - 260px); border-bottom:1px solid #f0f0f0; }
.table-toolbar { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; gap:8px; }
.table-toolbar .toolbar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.table-toolbar .toolbar-right { display:flex; align-items:center; gap:8px; }
.table-search { padding:6px 12px; border:1px solid #d9d9d9; border-radius:4px; width:240px; }
.table-search:focus { border-color:#1B5CFF; outline:none; }
.search-wrap { position:relative; display:inline-block; }
.search-wrap .table-search { padding-right:28px; }
.search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:16px; color:#bbb; line-height:1; display:none; user-select:none; }
.search-clear:hover { color:#FA5151; }
.search-wrap .table-search:not(:placeholder-shown) ~ .search-clear { display:block; }
table.data-table { width:100%; border-collapse:collapse; }
table.data-table thead th { background:#fafafa; padding:10px 12px; text-align:left; font-size:13px; color:#666; font-weight:600; white-space:nowrap; border-bottom:1px solid #e8e8e8; position:sticky; top:0; z-index:1; }
table.data-table tbody td { padding:8px 12px; border-bottom:1px solid #f0f0f0; font-size:13px; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
table.data-table tbody tr:hover { background:#f5f7ff; }
table.data-table tbody tr:last-child td { border-bottom:none; }
.row-actions { display:flex; gap:4px; }
.empty-row td { text-align:center; color:#ccc; padding:30px; }
.amount-cell { text-align:right; font-family:'Consolas','Courier New',monospace; }
.amount-red { color:#FA5151; }
.amount-green { color:#07C160; }
.total-row td { font-weight:bold; background:#fafafa; border-top:2px solid #1B5CFF; }

/* ===== 表单弹窗 ===== */
.modal-overlay { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal-box { background:#fff; border-radius:8px; width:600px; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; }
.modal-box.large { width:800px; }
.modal-header { padding:16px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; }
.modal-close { background:none; border:none; font-size:24px; color:#999; line-height:1; }
.modal-close:hover { color:#333; }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-body .form-group { margin-bottom:16px; }
.modal-body .form-group label { display:block; font-size:13px; color:#666; margin-bottom:6px; }
.modal-body .form-group input, .modal-body .form-group select, .modal-body .form-group textarea { width:100%; padding:8px 10px; border:1px solid #d9d9d9; border-radius:4px; }
.modal-body .form-group input:focus, .modal-body .form-group select:focus, .modal-body .form-group textarea:focus { border-color:#1B5CFF; outline:none; }
.modal-body .form-row { display:flex; gap:16px; }
.modal-body .form-row .form-group { flex:1; }
.modal-footer { padding:12px 20px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:8px; }

/* ===== Toast ===== */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-100px); background:#333; color:#fff; padding:10px 24px; border-radius:6px; font-size:14px; z-index:10000; transition:transform .3s; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { background:#07C160; }
.toast.error { background:#FA5151; }

/* ===== 应收应付概览 ===== */
.summary-table { width:100%; border-collapse:collapse; }
.summary-table th { background:#fafafa; padding:10px 12px; text-align:left; font-size:13px; color:#666; font-weight:600; border-bottom:1px solid #e8e8e8; }
.summary-table td { padding:8px 12px; border-bottom:1px solid #f0f0f0; font-size:13px; }
.summary-table tr:hover { background:#f5f7ff; }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:bold; }
.rank-1 { background:#FFD700; color:#fff; }
.rank-2 { background:#C0C0C0; color:#fff; }
.rank-3 { background:#CD7F32; color:#fff; }
.rank-other { background:#e8e8e8; color:#666; }

/* ===== 状态徽章 ===== */
.badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:500; }
.badge-success { background:#E8F7EE; color:#07A34A; }
.badge-danger { background:#FDECEC; color:#FA5151; }

/* ===== 列筛选（下拉式） ===== */
.th-filter-btn { display:inline-block; margin-left:4px; cursor:pointer; font-size:11px; color:#bbb; vertical-align:middle; }
.th-filter-btn.active { color:#1B5CFF; }
.filter-dropdown { position:absolute; z-index:100; background:#fff; border:1px solid #d9d9d9; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.15); max-height:300px; overflow-y:auto; min-width:160px; }
.filter-dropdown .fd-header { padding:8px 12px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.filter-dropdown .fd-header a { font-size:12px; color:#1B5CFF; cursor:pointer; text-decoration:none; }
.filter-dropdown .fd-list { padding:4px 0; }
.filter-dropdown .fd-item { padding:4px 12px; font-size:13px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.filter-dropdown .fd-item:hover { background:#f5f7ff; }
.filter-dropdown .fd-item input { margin:0; cursor:pointer; }
.filter-dropdown .fd-empty { padding:12px; text-align:center; color:#ccc; font-size:13px; }

/* ===== 权限分配 ===== */
.perm-section { margin-top:16px; padding:16px; border:1px solid #e8e8e8; border-radius:8px; background:#fafafa; }
.perm-section-title { font-size:14px; font-weight:600; color:#333; margin-bottom:4px; }
.perm-hint { font-size:12px; color:#999; margin-bottom:12px; }
.perm-checkboxes { display:flex; flex-wrap:wrap; gap:8px 16px; }
.perm-item { display:flex; align-items:center; gap:4px; font-size:13px; cursor:pointer; padding:6px 12px; border:1px solid #d9d9d9; border-radius:6px; background:#fff; transition:border-color .2s; }
.perm-item:hover { border-color:#1B5CFF; }
.perm-item input { margin:0; cursor:pointer; }
.perm-actions { margin-top:10px; display:flex; gap:8px; align-items:center; }

/* ===== 分页 ===== */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; }
.pagination button { min-width:30px; height:30px; border:1px solid #d9d9d9; background:#fff; border-radius:4px; font-size:13px; }
.pagination button:hover { border-color:#1B5CFF; color:#1B5CFF; }
.pagination button.active { background:#1B5CFF; color:#fff; border-color:#1B5CFF; }
.pagination button:disabled { color:#ccc; cursor:default; }
.pagination .page-info { font-size:13px; color:#999; margin-left:8px; }

/* ===== 信息提示 ===== */
.info-banner { background:#e8efff; border:1px solid #b3d0ff; border-radius:6px; padding:10px 16px; margin-bottom:16px; font-size:13px; color:#1B5CFF; }
.tag { display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px; }
.tag-blue { background:#e8efff; color:#1B5CFF; }
.tag-green { background:#e8f8ee; color:#07C160; }
.tag-orange { background:#fff5e6; color:#FF9500; }

/* ===== 移动端菜单按钮（汉堡） ===== */
.menu-toggle { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px; line-height:1; }
.sidebar-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.4); z-index:99; }

/* ===== 响应式：平板（≤1024px） ===== */
@media (max-width:1024px) {
  .sidebar { width:180px; }
  .content { padding:16px; }
  .modal-box.large { width:90vw; }
}

/* ===== 响应式：手机（≤768px） ===== */
@media (max-width:768px) {
  /* 顶部栏 */
  .topbar { padding:0 12px; height:50px; }
  .topbar-left { flex:1; min-width:0; gap:8px; }
  .topbar-title { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-version { display:none; }
  .topbar-right { gap:8px; flex-shrink:0; }
  .topbar-user { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .topbar-right .btn-outline { padding:4px 10px; font-size:12px; }

  /* 首页统计卡片内表格：允许横向滚动避免列挤压 */
  .stat-card { overflow-x:auto; }
  .stat-card .summary-table { min-width:480px; }

  /* 侧边栏：默认隐藏，汉堡按钮展开 */
  .topbar { position:relative; z-index:101; }
  .mobile-toggle-btn { display:block; }
  .sidebar { position:fixed; left:-220px; top:50px; bottom:0; width:220px; z-index:100; transition:left .25s ease; box-shadow:2px 0 12px rgba(0,0,0,.12); }
  .sidebar.open { left:0; }
  .sidebar-overlay.show { display:block; }

  /* 内容区 */
  .content { padding:12px; }
  .page-title { font-size:17px; }
  .page-header { flex-wrap:wrap; gap:8px; }
  .page-actions { flex-wrap:wrap; }

  /* 表格：横向滚动 */
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.data-table { min-width:650px; }

  /* 工具栏 */
  .table-search { width:100%; }
  .table-toolbar { padding:10px 12px; }

  /* 统计卡片：单列 */
  .stat-cards { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
  .stat-card { padding:14px; }
  .stat-card-value { font-size:22px; }

  /* 登录页 */
  .login-box { width:90vw; }
  .login-header { padding:28px 20px 16px; }
  .login-logo { font-size:24px; }
  .login-form { padding:0 20px 24px; }

  /* 弹窗：全屏 */
  .modal-overlay { align-items:flex-end; }
  .modal-box { width:100vw; max-width:100vw; max-height:92vh; border-radius:12px 12px 0 0; }
  .modal-box.large { width:100vw; max-width:100vw; }
  .modal-body { padding:16px; }
  .modal-body .form-row { flex-direction:column; gap:0; }
  .modal-header { padding:14px 16px; }
  .modal-footer { padding:10px 16px; }

  /* 搜索框 */
  .table-search { width:100%; }
  .toolbar-left { width:100%; }

  /* 筛选下拉 */
  .filter-dropdown { max-width:80vw; }

  /* 分页 */
  .pagination { flex-wrap:wrap; }

  /* 权限卡片 */
  .perm-item { flex:1 1 auto; }
}

/* ===== 响应式：小屏手机（≤480px） ===== */
@media (max-width:480px) {
  .topbar-title { font-size:13px; }
  .page-title { font-size:15px; }
  .btn-primary, .btn-outline { padding:6px 12px; font-size:13px; }
  .content { padding:10px; }
  .stat-cards { grid-template-columns:1fr 1fr; }
}