/* Hesabkitab 橙色主题 */
:root {
  --hk-orange: #E8622C;
  --hk-orange-dark: #C94A1A;
  --hk-orange-light: #FFF3EC;
  --hk-orange-mid: #FF8A50;
}
body {
  background: #f5f5f5;
  font-size: 14px;
}
.hk-navbar {
  background: linear-gradient(135deg, #E8622C, #F57C00);
}
.hk-navbar .navbar-brand, .hk-navbar .nav-link { color: #fff !important; }
.hk-navbar .nav-link:hover { opacity: .85; }
.hk-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 18px;
  margin-bottom: 16px;
}
.hk-stat {
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  margin-bottom: 8px;
}
.hk-stat .num { font-size: 19px; font-weight: 700; line-height: 1.2; }
.hk-stat small { font-size: 11px; opacity: .92; }
.hk-stat.orange { background: linear-gradient(135deg, #E8622C, #F57C00); }
.hk-stat.green { background: linear-gradient(135deg, #2E7D32, #43A047); }
.hk-stat.red { background: linear-gradient(135deg, #C62828, #E53935); }
.hk-stat.blue { background: linear-gradient(135deg, #1565C0, #1E88E5); }
.btn-hk {
  background: linear-gradient(135deg, #E8622C, #F57C00);
  color: #fff;
  border: none;
}
.btn-hk:hover { background: linear-gradient(135deg, #C94A1A, #E65100); color: #fff; }
.btn-outline-hk {
  border: 1.5px solid #E8622C;
  color: #E8622C;
}
.btn-outline-hk:hover { background: #E8622C; color: #fff; }
.table > thead > tr > th {
  background: linear-gradient(135deg, #E8622C, #F57C00);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 5px 8px;
}
.table td { vertical-align: middle; font-size: 13px; padding: 4px 8px; }
.hk-badge-paid { background: #E8F5E9; color: #2E7D32; }
.hk-badge-unpaid { background: #FFEBEE; color: #C62828; }
.hk-badge-partial { background: #FFF3E0; color: #E65100; }
.hk-badge-transit { background: #E3F2FD; color: #1565C0; }
.login-box {
  max-width: 400px;
  margin: 8% auto;
}
.login-box .card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(232,98,44,.15);
}
.login-box .card-header {
  background: linear-gradient(135deg, #E8622C, #F57C00);
  color: #fff;
  text-align: center;
  border-radius: 14px 14px 0 0;
  padding: 20px;
}
.login-box img { height: 40px; }
.hk-logo-sm { height: 32px; }
/* 可点击的名称链接（替代详情按钮） */
.clickable {
  color: #C94A1A;
  font-weight: 700;
  text-decoration: none;
}
.clickable:hover { text-decoration: underline; color: #E8622C; }
/* 手机端隐藏次要列 */
.hide-phone { display: none; }
@media (min-width: 768px) {
  .hide-phone { display: table-cell; }
}
/* 紧凑表格：手机上一屏多显示 */
@media (max-width: 768px) {
  body { font-size: 13px; }
  .hk-card { padding: 12px; }
  .table td, .table th { padding: 4px 6px; }
  .hk-stat .num { font-size: 16px; }
}
/* 打印样式（对账单） */
@media print {
  .hk-no-print { display: none !important; }
  body { background: #fff; }
  .hk-card { box-shadow: none; border: 1px solid #ddd; }
}
/* App 式手机端：底部导航栏 */
.app-main { padding-bottom: 24px; }
.mobile-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: flex; background: #fff; border-top: 1px solid #eee;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav .mbn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 8px 0 6px; color: #888; text-decoration: none; font-size: 11px;
}
.mobile-bottom-nav .mbn-item small { line-height: 1.2; margin-top: 2px; }
.mobile-bottom-nav .mbn-item:hover, .mobile-bottom-nav .mbn-item:active { color: #E8622C; }
@media (max-width: 991.98px) {
  .app-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .hk-navbar { padding-top: 6px; padding-bottom: 6px; }
}

/* ===== 顶部统计卡 hover 边缘移动光晕（仿阿里云卡片）===== */
.hk-stat { position: relative; }
@property --hkang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hk-stat::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--hkang,0deg), transparent 0deg, #fff 25deg, transparent 70deg, #fff 130deg, transparent 210deg, #fff 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.hk-stat:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transform: translateY(-2px);
  transition: transform .2s, box-shadow .2s;
}
.hk-stat:hover::after { opacity: 1; animation: hkSpin 2.6s linear infinite; }
@keyframes hkSpin { to { --hkang: 360deg; } }
/* 无 @property 支持的旧浏览器：光晕静态显示、不转，作为降级 */

/* ===== 列表筛选栏（与 carrier_view 橙色主题统一）===== */
.hk-filterbar {
  background: #fff7f2;
  border: 1px solid #F4DCCF;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.hk-filterbar .form-select, .hk-filterbar .form-control { border-color: #F0C9B8; }
.hk-filterbar .form-select:focus, .hk-filterbar .form-control:focus {
  border-color: #E8622C; box-shadow: 0 0 0 .2rem rgba(232,98,44,.15);
}
.hk-pills { margin: 0; }
.hk-pills .nav-link {
  color: #C94A1A; background: #fff;
  border: 1px solid #F0C9B8; border-radius: 20px;
  font-size: 12px; padding: 4px 14px; margin: 0 6px 6px 0;
}
.hk-pills .nav-link:hover { border-color: #E8622C; }
.hk-pills .nav-link.active {
  background: linear-gradient(135deg, #E8622C, #F57C00);
  color: #fff; border-color: transparent;
}
/* 合计 chips */
.hk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 20px; font-size: 13px;
  background: #fff7f2; border: 1px solid #F4DCCF;
}
.hk-chip b { font-size: 15px; }
.hk-chip.hk-chip-total { background: linear-gradient(135deg, #E8622C, #F57C00); color: #fff; border: none; }
.hk-chip.hk-chip-green { background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; border: none; }

/* 汇总合计行 */
.hk-summary {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 4px 0 14px; margin-bottom: -6px;
}

/* 状态相连 tab：选中项橙色并向下连到表格橙条 */
.hk-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.hk-tab {
  padding: 8px 20px; font-size: 12px; font-weight: 600;
  color: #C94A1A; background: #fff;
  border: 1px solid #F0C9B8; border-bottom: none;
  border-radius: 9px 9px 0 0;
  text-decoration: none; margin-bottom: -1px;
}
.hk-tab:hover { color: #E8622C; }
.hk-tab.active {
  background: linear-gradient(135deg, #E8622C, #F57C00);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 0 0 #F57C00; /* 向下延伸，连到下方表格橙条 */
  position: relative; z-index: 1;
}
/* 相连 tab 下方的表格：去掉与 tab 之间的缝隙，表头橙条作为选中项延续 */
.hk-tabs + .table-responsive { margin-top: 0; }
.hk-tabs + .table-responsive .table { margin-bottom: 0; }
.hk-tabs + .table-responsive thead th:first-child { border-top-left-radius: 0; }