* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #f5f7fa; }
html, body, #app { height: 100%; margin: 0; }

/* 固定布局：表头+侧栏不动，仅内容区滚动 */
.el-container { height: 100%; }
.header { 
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  background: #1a1a2e; color: #fff; padding: 0 16px; height: 52px !important;
}
.header .logo { font-size: 16px; font-weight: 600; letter-spacing: 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
.logo-img { width: 28px; height: 28px; border-radius: 4px; flex-shrink:0; }
.header-right { display: flex; align-items: center; gap: 8px; }

.sidebar { background: #fff; border-right: 1px solid #e8e8e8; height: calc(100vh - 52px); overflow-y: auto; position: sticky; top: 52px; }
.sidebar .el-menu { border-right: none; }

.main-area { background: #f5f7fa; padding: 16px; height: calc(100vh - 52px); overflow-y: auto; }

/* Page header */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.page-header h2 { font-size: 18px; font-weight: 600; color: #303133; }

/* Cards */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: #fff; border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-card .label { font-size: 12px; color: #909399; margin-bottom: 4px; }
.stat-card .value { font-size: 24px; font-weight: 700; color: #303133; }

/* Table enhancements */
.el-table { border-radius: 8px; }
.el-table--scrollable-y .el-table__body-wrapper { overflow-x: auto; }

/* 表格固定表头 - 给表格内容区设置最大高度，超过时表头固定、内容滚动 */

/* Dialog */
.el-dialog__body { padding: 12px 16px; overflow-y: auto; max-height: calc(90vh - 130px); }

/* 弹窗可拖拽调整大小 */
.el-dialog {
  min-width: 460px;
}
.el-dialog__body {
  overflow-y: auto;
  max-height: calc(85vh - 110px);
}

/* 表格列拖拽分割线 / 列宽可调 */
.el-table .el-table__cell .resize-handle { display: block !important; }

/* Mobile responsive */
@media (max-width: 768px) {
  /* 隐藏桌面侧栏和其切换按钮 */
  .desktop-sidebar, .desktop-sidebar-btn { display: none !important; }
  /* 显示手机菜单按钮 */
  .mobile-menu-btn { display: inline-flex !important; }
  .header-title { font-size: 14px; }
  .time-tag { display: none !important; }
  .user-btn { font-size: 12px; padding: 3px 6px !important; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header { padding: 0 8px !important; }
  .main-content { padding: 10px 8px !important; }
  
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-card { padding: 10px 12px; }
  .stat-card .value { font-size: 20px; }
  
  .filter-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-bar .el-select,
  .filter-bar .el-input,
  .filter-bar .el-date-editor,
  .filter-bar .el-button { width: 100% !important; margin-left: 0 !important; }
  .filter-bar .el-date-editor .el-input__wrapper { width: 100%; }
  
  .el-dialog { width: 96% !important; max-width: 96vw !important; margin: 2vh auto !important; min-width: auto !important; }
  .el-dialog__body { padding: 8px 10px; }
  
  /* 表单手机适配 */
  .el-dialog .el-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 2px !important; }
  .el-dialog .el-row { margin-left: 0 !important; margin-right: 0 !important; }
  .el-dialog .el-form-item { margin-bottom: 8px; }
  .el-dialog .el-form-item__label { padding-bottom: 2px; height: auto; line-height: 1.4; font-size: 13px; }
  
  .el-form-item [style*="flex"] { flex-wrap: nowrap; width: 100%; }
  .el-form-item [style*="flex"] .el-select { flex: 1 1 auto !important; min-width: 0 !important; }
  .el-form-item [style*="flex"] .el-button { flex-shrink: 0; }
  .el-form-item__content { flex-wrap: nowrap !important; width: 100%; }
  
  /* 表格滚动 */
  .el-table { font-size: 11px; }
  .el-table .cell { padding: 0 3px; line-height: 16px; }
  .el-table__body-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  .el-select { width: 100% !important; }
  .el-form-item .el-select { width: 100% !important; }
  
  .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .quick-actions .el-button { height: 40px; font-size: 13px; }
  
  .page-header h2 { font-size: 15px; }
  
  .el-table-column--selection { display: none; }
  
  .el-table .el-button { padding: 3px 6px; font-size: 10px; }
  
  .el-descriptions__cell { padding: 3px 5px !important; }
  .el-descriptions__title { font-size: 13px; }
  
  .plate-no { font-weight: 600; letter-spacing: 1px; }

  /* 批量操作按钮行 */
  [style*="margin-bottom:10px;display:flex"] { gap: 4px !important; flex-wrap: wrap !important; }
  [style*="margin-bottom:10px;display:flex"] .el-button { font-size: 11px; padding: 4px 8px; }

  /* 工作台快速操作按钮 */
  .quick-actions .el-button { height: 38px; font-size: 12px; border-radius: 6px; }

  /* 工作台最近费用/运单表格 */
  .el-card .el-table .el-table__cell { padding: 2px 0; }
  .el-card .el-table .cell { padding: 0 2px; }

  /* 抽屉导航 */
  .mobile-drawer .el-drawer__body { padding: 0; }
  .mobile-nav-menu { border-right: none; }
  .mobile-nav-menu .el-menu-item { height: 44px; line-height: 44px; font-size: 14px; }

  /* el-row 在手机上去掉左右负 margin 避免溢出 */
  .el-row { margin-left: 0 !important; margin-right: 0 !important; }
  .el-row .el-col { padding-left: 4px !important; padding-right: 4px !important; }

  /* 工作台 el-row 内联样式覆盖 */
  [style*="margin-bottom:20px"] .el-col { padding-left: 0 !important; padding-right: 0 !important; }

  /* el-card 边距 */
  .el-card { border-radius: 6px; }
  .el-card__body { padding: 12px !important; }

  /* 金额输入框 */
  .el-input-number { width: 100% !important; }
  .el-input-number .el-input__wrapper { width: 100%; }

  /* 日期选择器日历弹出适配 */
  .el-picker-panel { width: 280px !important; }

  /* 审批/打款按钮行 */
  [style*="margin-bottom:10px;display:flex;align-items:center;gap:12px"] { gap: 4px !important; flex-wrap: wrap !important; }
}

/* Status badges */
.status-pending { color: #e6a23c; }
.status-completed { color: #67c23a; }
.status-settled { color: #909399; }

/* Quick actions on dashboard */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.quick-actions .el-button { height: 44px; font-size: 14px; border-radius: 8px; }

/* Filter bar */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* 操作列按钮紧凑 */
.action-btns { display: flex; gap: 4px; flex-wrap: nowrap; }
.action-btns .el-button { padding: 5px 8px; font-size: 12px; }

/* ===== 标签栏 ===== */
.tab-bar {
  background: #f0f2f5; border-bottom: 1px solid #e0e0e0;
  padding: 0; flex-shrink: 0; overflow: hidden;
}
.tab-scroll {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; padding: 0;
}
.tab-item {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; font-size: 13px; cursor: pointer;
  white-space: nowrap; border-right: 1px solid #e0e0e0;
  background: #f7f8fa; color: #606266; user-select: none;
  transition: all 0.15s;
}
.tab-item:hover { background: #eef0f4; }
.tab-item.active {
  background: #fff; color: #1a1a2e; font-weight: 600;
  border-bottom: 2px solid #409eff;
  margin-bottom: -1px;
}
.tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  opacity: 0.4; transition: all 0.15s;
}
.tab-close:hover { opacity: 1; background: #ddd; }

/* 手机上标签栏可横向滚动 */
@media (max-width: 768px) {
  .tab-scroll { -webkit-overflow-scrolling: touch; }
  .tab-item { padding: 5px 10px; font-size: 12px; }
}

/* 手机菜单按钮默认隐藏（仅手机显示） */
.mobile-menu-btn { display: none; }

/* 手机导航抽屉 */
.mobile-drawer .el-drawer__body { padding: 0; }
.mobile-nav-menu { border-right: none; }
.mobile-nav-menu .el-menu-item { font-size: 14px; height: 44px; line-height: 44px; }

/* ===== 手机卡片样式 ===== */
.mobile-card {
  background: #fff; border-radius: 8px; margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden;
}
.mobile-card:active { background: #f5f7fa; }
.mobile-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 6px; border-bottom: 1px solid #f0f0f0;
}
.card-waybill-no { font-weight: 600; font-size: 13px; color: #303133; }
.mobile-card-body { padding: 8px 12px 6px; }
.card-row { font-size: 12px; color: #606266; margin-bottom: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.card-label { color: #909399; font-size: 11px; white-space: nowrap; }
.mobile-card-actions {
  display: flex; gap: 6px; padding: 6px 12px 10px;
  border-top: 1px solid #f0f0f0;
}
.mobile-card-actions .el-button { flex: 1; padding: 6px 4px; font-size: 12px; }

/* 手机筛选行 */
.mobile-filter-row {
  display: flex; gap: 6px; align-items: center; margin-bottom: 8px;
}
.mobile-filter-extend {
  padding: 8px; background: #fafafa; border-radius: 6px; margin-bottom: 8px;
}

/* 手机批量操作栏 */
.mobile-batch-bar {
  display: flex; gap: 6px; align-items: center; padding: 8px 10px;
  background: #eef5ff; border-radius: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.mobile-batch-bar .el-button { font-size: 12px; padding: 5px 10px; }

/* 手机详情弹窗 */
.mobile-detail .el-descriptions__cell { padding: 6px 8px !important; }
.mobile-detail .el-descriptions__label { font-size: 12px; }

/* 手机为空状态 */
.el-empty { padding: 30px 0; }

/* 右上角用户按钮文字可见 */
.user-btn .el-button__text { color: #fff !important; }
.user-btn { color: #fff !important; }
.header .el-button--small.is-plain { color: #fff !important; }
.el-dropdown .el-button--small.is-plain { color: #fff !important; }

/* 侧栏折叠按钮（位于侧栏与内容区之间） */
.sidebar-collapse-btn {
  flex-shrink: 0; width: 16px;
  background: #f0f2f5; border: none; border-right: 1px solid #e8e8e8;
  color: #909399; cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all 0.2s; outline: none;
}
.sidebar-collapse-btn:hover { background: #409eff; color: #fff; }

/* 用户按钮文字颜色修复 */
.header .el-button--small.is-plain,
.app-header .el-button,
.app-header .el-button span,
.app-header .el-button.is-plain,
.app-header .el-button.is-plain span {
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
  background: transparent !important;
}

/* 表头固定：数据多时body滚动 */

/* 表头固定 - 数据行滚动 */
.el-table__header-wrapper { position: sticky !important; top: 0; z-index: 10; }
.el-table__body-wrapper { overflow-y: auto !important; max-height: calc(100vh - 250px); }

/* 表头固定不动：body区域滚动 */
.main-content .el-table { overflow-y: auto; }
.main-content .el-table__header-wrapper { position: sticky; top: 0; z-index: 10; background: #fff; }
.main-content .el-table__body-wrapper { overflow-y: auto; }

/* 合计行美化 */
.el-table .el-table__footer-wrapper .cell { font-weight: 600; font-size: 12px; padding: 0 4px !important; line-height: 24px !important; }
.el-table .el-table__footer-wrapper td.el-table__cell { background: #f0f5ff !important; border-top: 2px solid #409eff; padding: 0 !important; }
.el-table .el-table__footer-wrapper tr { height: 26px !important; }

/* 批量支付：已支付行淡化 */
.el-table .jh-paid-row td.el-table__cell { background: #fafafa !important; color: #c0c4cc; }
.el-table .jh-paid-row td.el-table__cell .cell { color: #c0c4cc; }