/* ==========================================================================
   app.css — 快乐报税系统 公共基础样式（统一 ui-* 前缀）
   说明：所有菜单页面共用此文件。通用组件（布局/按钮/表格/徽章/弹窗/表单/
   Tab/Toast/分页/统计卡/明细卡）的样式全部集中在这里；页面只用 ui-* 类，
   不再自带 <style>；个别页面确有特殊需求时，才在页面内追加少量样式。
   主色：#3385ff  背景：#f6f8fb  hover：#2b74e0
   ========================================================================== */

/* ============ 页面布局 ============ */
.ui-wrap { background:#f6f8fb; min-height:calc(100vh - 190px); padding:22px 24px; }
.ui-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ui-title { font-size:20px; font-weight:600; color:#1f2d3d; margin:0; }
.ui-sub { font-size:13px; color:#8a94a6; margin-top:4px; }

/* ============ 按钮 ============ */
.ui-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; transition:all .18s; line-height:1.2; background:#fff; }
.ui-btn-primary { background:#3385ff; color:#fff; }
.ui-btn-primary:hover { background:#2b74e0; color:#fff; }
.ui-btn-ghost { border-color:#dde3ec; color:#5a6478; }
.ui-btn-ghost:hover { border-color:#3385ff; color:#3385ff; }
.ui-btn-danger { border-color:#f3d2d2; color:#d9534f; }
.ui-btn-danger:hover { background:#d9534f; color:#fff; border-color:#d9534f; }
.ui-btn-outline-danger { border-color:#f3d2d2; color:#d9534f; }
.ui-btn-outline-danger:hover { background:#d9534f; color:#fff; border-color:#d9534f; }
.ui-btn-outline-success { border-color:#cdeeda; color:#1d8a3e; }
.ui-btn-outline-success:hover { background:#1d8a3e; color:#fff; border-color:#1d8a3e; }
.ui-btn-outline-info { border-color:#d6e6ff; color:#2563eb; }
.ui-btn-outline-info:hover { background:#2563eb; color:#fff; border-color:#2563eb; }
.ui-btn-green { color:#1d8a3e; border-color:#cdeeda; }
.ui-btn-green:hover { background:#e9f8ec; }
.ui-btn-success { background:#1d8a3e; color:#fff; }
.ui-btn-success:hover { background:#177a35; color:#fff; }
.ui-btn-outline-warn { border-color:#f2e3c4; color:#b07800; }
.ui-btn-outline-warn:hover { background:#b07800; color:#fff; border-color:#b07800; }
.ui-btn-sm { padding:5px 10px; font-size:12px; border-radius:6px; }

/* ============ 消息提示 ============ */
.ui-msg { border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; }
.ui-msg-ok { background:#e9f8ec; color:#1d8a3e; }
.ui-msg-err { background:#fdeeee; color:#d9534f; }

/* ============ 卡片 ============ */
.ui-card { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(30,60,90,.05); margin-bottom:16px; overflow:hidden; }
.ui-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid #eef1f5; }
.ui-card-head h5 { font-size:15px; color:#2c3e50; margin:0; }
.ui-card-body { padding:18px 18px 20px; }

/* 表单卡片头/体（录入类页面） */
.ui-form-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #eef1f6; }
.ui-form-title { font-size:15px; font-weight:600; color:#1f2d3d; margin:0; }
.ui-form-body { padding:18px 20px; }

/* 明细录入卡 */
.ui-lines-card { background:#fafbfd; border:1px solid #eef1f5; border-radius:8px; padding:12px; margin-top:14px; }
.ui-lines-title { font-size:13px; font-weight:700; color:#2c3e50; margin-bottom:10px; }

/* 合计栏 */
.ui-summary { display:flex; justify-content:flex-end; gap:28px; margin-top:14px; font-size:13px; flex-wrap:wrap; }
.ui-summary .ui-money { font-size:15px; }
.ui-summary .total { font-size:17px; font-weight:700; color:#e74c3c; }

/* ============ 筛选条 / Tab ============ */
.ui-filter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; }
.ui-filter label { font-size:13px; color:#4a5568; display:inline-flex; align-items:center; gap:6px; }
.ui-filter-meta { margin-left:auto; font-size:12px; color:#8a94a6; }
.ui-tabgroup { display:flex; gap:6px; flex-wrap:wrap; }
.ui-tab-mini { padding:5px 13px; border-radius:16px; font-size:12px; color:#666; background:#f7f9fc; border:1px solid #e6ecf3; cursor:pointer; text-decoration:none; transition:all .15s; }
.ui-tab-mini:hover { border-color:#3385ff; color:#3385ff; }
.ui-tab-mini.active { background:#3385ff; border-color:#3385ff; color:#fff; font-weight:600; }

/* 列表/表单 大 Tab */
.ui-tabs { display:flex; gap:2px; border-bottom:2px solid #e6ecf3; margin-bottom:14px; }
.ui-tab { padding:8px 18px; font-size:13px; color:#5a6b81; background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:all .15s; font-family:inherit; }
.ui-tab:hover { color:#3385ff; }
.ui-tab.active { color:#3385ff; font-weight:600; border-bottom-color:#3385ff; }
.ui-pane { display:none; }
.ui-pane.active { display:block; }

/* ============ 表单控件 ============ */
.ui-input { padding:8px 12px; border:1px solid #dde3ec; border-radius:8px; font-size:13px; color:#2c3e50; outline:none; transition:border-color .18s; background:#fff; }
.ui-input:focus { border-color:#3385ff; }
.ui-input:disabled { background:#f5f7fa; color:#a0a8b8; }
.ui-input-sm { padding:5px 9px; font-size:12px; border-radius:6px; }

/* ============ 表格 ============ */
.ui-table { width:100%; border-collapse:collapse; font-size:13px; }
.ui-table th { background:#f7f9fc; color:#6b7688; font-weight:600; text-align:left; padding:11px 14px; border-bottom:1px solid #e6ecf3; white-space:nowrap; }
.ui-table td { padding:11px 14px; border-bottom:1px solid #f2f4f8; color:#2c3e50; vertical-align:middle; }
.ui-table tbody tr { transition:background .12s; }
.ui-table tbody tr:hover { background:#f4f8ff; }
.ui-table tbody tr:last-child td { border-bottom:none; }
.ui-table .text-end { text-align:right; }
.ui-table-sm td, .ui-table-sm th { padding:7px 10px; font-size:12px; }
.ui-table-scroll { overflow-x:auto; }

/* ============ 徽章 ============ */
.ui-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; line-height:1.6; }
.ui-badge-blue { background:#e7f0ff; color:#2563eb; }
.ui-badge-green { background:#e9f8ec; color:#1d8a3e; }
.ui-badge-gray { background:#f0f2f5; color:#8a94a6; }
.ui-badge-orange { background:#fdf3e7; color:#c8791e; }
.ui-badge-purple { background:#f1eafa; color:#7c5cd6; }
.ui-badge-dark { background:#e5e7eb; color:#4b5563; }
/* 业务语义徽章（多页复用） */
.ui-badge-draft, .ui-badge-off { background:#f0f2f5; color:#8a94a6; }
.ui-badge-ok, .ui-badge-paid { background:#e9f8ec; color:#1d8a3e; }
.ui-badge-err { background:#fdeeee; color:#d9534f; }
tr.ui-row-in td { background:#f0fbf3; }
tr.ui-row-out td { background:#fdf2f2; }
.ui-badge-unpaid { background:#fff7e6; color:#b07800; }
.ui-badge-part { background:#eef4ff; color:#3b7cce; }

/* ============ 工具类 ============ */
.ui-mono { font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; }
.ui-muted { color:#8a94a6; }
.ui-money { font-weight:600; color:#1f2d3d; }
.ui-sml { font-size:12px; }
.ui-link { color:#3385ff; text-decoration:none; font-size:12px; }
.ui-link:hover { text-decoration:underline; }
.ui-empty { padding:48px 0; text-align:center; color:#8a94a6; font-size:14px; }
.ui-empty-icon { font-size:34px; display:block; margin-bottom:8px; }
.ui-empty-btn { margin-top:12px; }
.ui-ops { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
.text-end { text-align:right; }
.text-center { text-align:center; }
.fw-bold { font-weight:700; }
.text-success { color:#1d8a3e; }
.text-danger { color:#d9534f; }
.text-primary { color:#2563eb; }

/* ============ 统计卡 ============ */
.ui-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.ui-stat { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(30,60,90,.05); padding:16px 18px; }
.ui-stat-label { font-size:12px; color:#8a94a6; }
.ui-stat-num { font-size:22px; font-weight:600; color:#1f2d3d; margin-top:6px; }
.ui-stat-num.blue { color:#2563eb; }
.ui-stat-num.red { color:#d9534f; }

/* ============ 分页 ============ */
.ui-pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid #eef1f5; font-size:12px; color:#888; }
.ui-page-btn { padding:4px 11px; border:1px solid #dde3ec; border-radius:5px; color:#555; text-decoration:none; background:#fff; transition:all .15s; }
.ui-page-btn:hover { border-color:#3385ff; color:#3385ff; }
.ui-page-btn.disabled { opacity:.45; pointer-events:none; }
.ui-page-cur { color:#3385ff; font-weight:600; }

/* ============ 弹窗 ============ */
.ui-modal { position:fixed; inset:0; background:rgba(23,35,52,.45); display:none; align-items:center; justify-content:center; z-index:1050; }
.ui-modal.show { display:flex; }
.ui-dialog { background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(15,35,60,.25); width:100%; max-width:680px; max-height:90vh; overflow:auto; animation:uiPop .18s ease; }
@keyframes uiPop { from { transform:translateY(-12px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.ui-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eef1f6; }
.ui-dialog-title { font-size:16px; font-weight:600; color:#1f2d3d; }
.ui-close { background:none; border:none; font-size:22px; color:#8a94a6; cursor:pointer; line-height:1; padding:0 4px; }
.ui-close:hover { color:#2c3e50; }
.ui-dialog-body { padding:20px; }
.ui-dialog-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #eef1f6; }

/* ============ 表单栅格 ============ */
.ui-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.ui-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ui-field .ui-input { width:100%; }
.ui-field label { font-size:13px; color:#4a5568; font-weight:500; }
.ui-field label .req { color:#d9534f; }
.ui-label { font-size:13px; color:#4a5568; font-weight:500; }
.ui-label .req { color:#d9534f; }
.ui-textarea { resize:vertical; min-height:64px; }
.ui-span1{grid-column:span 1;}.ui-span2{grid-column:span 2;}.ui-span3{grid-column:span 3;}.ui-span4{grid-column:span 4;}
.ui-span5{grid-column:span 5;}.ui-span6{grid-column:span 6;}.ui-span7{grid-column:span 7;}.ui-span8{grid-column:span 8;}
.ui-span9{grid-column:span 9;}.ui-span10{grid-column:span 10;}.ui-span11{grid-column:span 11;}.ui-span12{grid-column:span 12;}

/* 两列表单栅格（账套等） */
.ui-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ui-field.full { grid-column:1 / -1; }

/* 勾选项 */
.ui-check { display:flex; align-items:center; gap:8px; font-size:13px; color:#4a5568; }
.ui-check input { width:16px; height:16px; accent-color:#3385ff; }
.ui-check-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ui-check-inline { display:flex; align-items:center; gap:7px; font-size:13px; color:#444; background:#f8fafc; border:1px solid #eef1f5; border-radius:7px; padding:8px 11px; cursor:pointer; transition:all .15s; }
.ui-check-inline:hover { border-color:#cfe1ff; }
.ui-check-inline input { accent-color:#3385ff; width:15px; height:15px; }

/* ============ Toast ============ */
.ui-toast { position:fixed; top:20px; right:20px; padding:12px 18px; border-radius:10px; color:#fff; font-size:13px; box-shadow:0 6px 20px rgba(15,35,60,.2); opacity:0; transform:translateY(-8px); transition:all .25s; z-index:1200; pointer-events:none; max-width:360px; }
.ui-toast.show { opacity:1; transform:translateY(0); }
.ui-toast-ok { background:#1d8a3e; }
.ui-toast-err { background:#d9534f; }

/* ============ 标签（账套等） ============ */
.ui-tag { display:inline-block; padding:2px 9px; border-radius:5px; font-size:11px; background:#f0f4ff; color:#3b7cce; border:1px solid #dbe6ff; margin:2px 3px 2px 0; }
.ui-tag-off { background:#f5f7fa; color:#a3aebd; border-color:#eef1f5; }