/* 供热收费管理系统 - 样式（手机/电脑自适应） */
*{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#c0392b;--primary-d:#96281b;--bg:#f4f5f7;--card:#fff;--text:#222;--muted:#888;--border:#e3e5e8;--green:#1e8e3e;--orange:#e67e22;--blue:#2471a3}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:15px}
.hidden{display:none!important}
.btn{border:1px solid var(--border);background:#fff;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:14px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.big{width:100%;padding:12px;font-size:16px;margin-top:10px}
.btn.small{padding:5px 10px;font-size:12px}
.btn.danger{color:#c0392b;border-color:#e6b0aa}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:15px;margin:4px 0;background:#fff}
label{font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
th{background:#fafbfc;color:var(--muted);font-weight:600}
.table-wrap{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid var(--border)}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px}
.card h3{margin-bottom:10px;font-size:16px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
.stat .n{font-size:22px;font-weight:700;color:var(--primary)}
.stat .t{font-size:12px;color:var(--muted);margin-top:4px}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;background:#eee}
.badge.green{background:#d4efdf;color:var(--green)} .badge.orange{background:#fdebd0;color:var(--orange)}
.badge.red{background:#fadbd8;color:#c0392b} .badge.blue{background:#d6eaf8;color:var(--blue)}
/* 登录 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:12px;padding:28px 24px;width:100%;max-width:360px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.login-card h1{font-size:22px;text-align:center}
.login-card .sub{text-align:center;color:var(--muted);margin:6px 0 16px}
.login-card .hint{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
.err{color:#c0392b;font-size:13px;margin-top:8px;min-height:18px}
/* 布局 */
#view-app{display:flex;min-height:100vh}
#sidebar{width:210px;background:#2c3e50;color:#ecf0f1;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:50}
.brand{padding:16px;font-size:17px;font-weight:700;border-bottom:1px solid #3d566e}
#nav{flex:1;overflow-y:auto;padding:8px}
#nav a{display:block;color:#ecf0f1;text-decoration:none;padding:11px 12px;border-radius:6px;margin-bottom:2px;font-size:15px}
#nav a.active,#nav a:active{background:var(--primary)}
.side-foot{padding:12px;border-top:1px solid #3d566e;font-size:12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.side-foot .btn{background:#3d566e;border-color:#3d566e;color:#fff}
.main{flex:1;margin-left:210px;display:flex;flex-direction:column;min-width:0}
#topbar{background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40}
#page-title{font-size:17px;font-weight:700;flex:1}
#btn-menu{display:none}
#season-badge{font-size:12px;color:var(--muted)}
#page{padding:16px;max-width:1200px;width:100%;margin:0 auto}
#bottomnav{display:none}
/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-card{background:#fff;border-radius:10px;padding:20px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-card h3{margin-bottom:12px}
.modal-card .row{justify-content:flex-end;margin-top:14px}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 18px;border-radius:20px;z-index:200;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.form-grid .full{grid-column:1/-1}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs .btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:14px}
.perm-grid label{display:flex;gap:6px;align-items:center;color:var(--text)}
.perm-grid input{width:auto;margin:0}
.bar{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--primary)}
/* 分组导航 */
.nav-group{margin-bottom:10px}
.nav-group-title{font-size:12px;color:#95a5a6;padding:8px 12px 4px;letter-spacing:2px}
/* 大按钮面板 */
.bigbtn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.bigbtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:16px 8px;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.bigbtn:active{background:#f7f7f7}
.bigbtn .bi{font-size:26px}
/* 欠费分组卡 */
.debtor-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:10px}
.debtor-card .table-wrap{margin-top:8px}
.muted-sm{font-size:12px;color:var(--muted);margin-top:2px}
/* 打印 */
#print-area{display:none}
.pdoc{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#000;max-width:640px;margin:0 auto;padding:10px}
.pdoc-head{text-align:center;margin-bottom:14px}
.pdoc-head h2{font-size:22px;margin-bottom:6px}
.pdoc-head h3{font-size:17px;font-weight:600;letter-spacing:4px}
.pdoc-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.pdoc-table th,.pdoc-table td{border:1px solid #000;padding:7px 8px;text-align:left}
.pdoc-table th{background:#f2f2f2;width:110px;font-weight:600;white-space:nowrap}
.pdoc-tip{font-size:13px;margin-top:12px;line-height:1.8}
.pdoc-foot{text-align:right;font-size:12px;color:#555;margin-top:16px}
@media print{
  body>*:not(#print-area){display:none!important}
  #print-area{display:block!important}
  body{background:#fff}
}
/* 手机 */
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);transition:transform .25s}
  #sidebar.open{transform:none}
  .main{margin-left:0;padding-bottom:64px}
  #btn-menu{display:inline-block}
  #bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:50;overflow-x:auto}
  #bottomnav a{flex:1;min-width:64px;text-align:center;padding:9px 4px;font-size:11px;color:var(--muted);text-decoration:none}
  #bottomnav a.active{color:var(--primary);font-weight:700}
  .form-grid{grid-template-columns:1fr}
  #page{padding:12px;overflow-x:hidden}
  th,td{padding:7px 6px;font-size:13px;word-break:break-all}
  /* 表格转卡片：隐藏表头行，每行变卡片，每格前面显示列名 */
  .table-wrap{background:transparent;border:none;overflow:visible}
  .table-wrap table{display:block;background:transparent}
  .table-wrap tr.t-head{display:none}
  .table-wrap tbody{display:block}
  .table-wrap tr:not(.t-head){display:block;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:10px;padding:8px 12px}
  .table-wrap td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none;white-space:normal;padding:6px 0;font-size:14px;text-align:right}
  .table-wrap td::before{content:attr(data-label);color:var(--muted);font-size:12px;flex-shrink:0;text-align:left}
  .table-wrap td:empty{display:none}
  /* 全屏弹窗 */
  .modal{padding:0}
  .modal-card{max-width:100%;min-height:100vh;border-radius:0;max-height:100vh}
  .bigbtn-grid{grid-template-columns:repeat(3,1fr)}
}