/* 响应式 */
/* 表格 */
.table td,
.table thead th,
.box_nowrap {
  white-space: nowrap;
}
/* 表格自适应 + 横向滚动修复（service模板系统/备注/操作列显示） */
.service-table-wrapper {
  overflow: hidden !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.service-table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.service-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.service-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.service-data-table {
  min-width: 750px;
  table-layout: auto;
}
.service-data-table td,
.service-data-table th {
  white-space: nowrap;
  vertical-align: middle;
}
.service-data-table .btn-sm.w-xs {
  min-width: 58px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.module_chart_date {
  display: flex;
  align-items: center;
}
.btn-group.btn-group-toggle {
  display: -webkit-inline-box !important;
}
.btn-group-toggle > .btn {
  margin-bottom: 10px !important;
}

.login_right {
  width: 65% !important;
}
.normalhide {
  display: none;
}
@media screen and (max-width: 1366px) {
  .login_right {
    width: 80% !important;
    margin: 80px 0;
  }
}
@media screen and (max-width: 1200px) {
  .login_right {
    width: 80% !important;
    margin: 0;
  }
}
@media screen and (max-width: 995px) {
  .security-item-desc,
  .navbar-brand-box,
  .phonehide {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .bglogo {
    display: none;
  }
  .login_right {
    width: 100% !important;
    margin: 80px 0;
  }
  .table-header,
  .table-footer,
  .table-pagination {
    flex-direction: column;
    align-items: start;
  }
  .table-filter,
  .table-tools,
  .table-pageinfo {
    margin-bottom: 1rem;
  }

  .ststus-box .card-body {
    padding: 0 !important;
  }
  .ststus-box .card-body .container-fluid {
    margin: 0 !important;
  }

  .normalhide {
    display: block;
  }

  /* 安全中心 */
  .security-item-desc,
  .navbar-brand-box,
  .phonehide {
    display: none !important;
  }

  /* 发票地址 */
  .zd-cascader-menu {
    min-width: 80px !important;
  }
  .zd-cascader-node {
    padding: 0 10px !important;
  }
  .zd-cascader-node__postfix {
    right: 20px !important;
  }

  .module_chart_date {
    display: block;
  }

  .btn-group.btn-group-toggle {
    display: -webkit-inline-box !important;
  }
  .btn-group-toggle > .btn {
    margin-bottom: 10px !important;
  }
  .security-item-title small {
    margin-left: 0px !important;
  }
}

/* ===== 2026-07-12 移动端侧边栏与点击修复 ===== */
@media (max-width: 991.98px) {
  .vertical-menu {
    position: fixed !important;
    top: 70px;
    left: -260px;
    width: 260px !important;
    bottom: 0;
    z-index: 1050 !important;
    display: block !important;
    transition: left 0.28s ease-in-out;
    -webkit-transition: left 0.28s ease-in-out;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  body.sidebar-enable .vertical-menu {
    left: 0 !important;
  }
  body.sidebar-enable::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
  }
  #vertical-menu-btn {
    position: relative;
    z-index: 1060;
    min-width: 42px;
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #vertical-menu-btn .fa-bars {
    pointer-events: none;
  }
  #page-topbar {
    position: relative;
    z-index: 1060;
  }
  .main-content {
    position: relative;
    z-index: 1;
  }
  .btn,
  .dash-btn,
  .dash-quick-action,
  .dash-product-item,
  .dash-stat-card,
  .dash-binding-btn,
  .dash-qr-box,
  .nav-link,
  .page-link,
  a.waves-effect,
  #vertical-menu-btn,
  .dropdown-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .btn,
  .dash-btn {
    min-height: 40px;
  }
  .btn-sm,
  .dash-btn-sm {
    min-height: 34px;
  }
  #legalDisclaimerModal {
    touch-action: auto;
  }
}

/* ===== 2026-07-12 v2 关键按钮可点击性增强 + 确认订单可达性 ===== */
/* 1. 解决 modal-backdrop 拦截点击 (Bootstrap 3 modal) */
.modal-backdrop.in,
.modal-backdrop.show {
  z-index: 1040;
  pointer-events: none !important;
}
.modal-backdrop.in + .modal,
.modal-backdrop.show + .modal,
.modal.show {
  z-index: 1055 !important;
  pointer-events: auto !important;
}
/* 2. 通用 .modal 容器也要高于 mobile-submit-btn 兜底 */
#legalDisclaimerModal,
.modal.fade.in,
.modal.fade.show {
  z-index: 1055 !important;
}
#legalDisclaimerModal .modal-content,
.modal.fade.in .modal-content,
.modal.fade.show .modal-content {
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}
/* 3. 防止 fixed/sticky 顶部遮挡按钮 - 三条杠按钮永远可点 */
header#page-topbar,
.navbar-header {
  z-index: 1060 !important;
  position: sticky !important;
  top: 0;
}
@media (max-width: 991.98px) {
  header#page-topbar,
  .navbar-header {
    position: fixed !important;
    width: 100%;
  }
  body {
    padding-top: 70px;
  }
  .page-content {
    padding-top: 18px !important;
  }
}
/* 4. 兜底: 防止 mobile-submit-btn 覆盖在确认订单按钮之上 */
.mobile-submit-btn {
  z-index: 1030 !important;
  pointer-events: auto !important;
}
.mobile-submit-btn .btn {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* 5. waves-effect 库可能拦截冒泡, 强制重新绑定 */
@media (max-width: 991.98px) {
  a.waves-effect,
  button.waves-effect {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
  .waves-effect .waves-ripple {
    pointer-events: none !important;
    z-index: -1 !important;
  }
}
/* 6. confirm-order 按钮单独强化: 解决购物车/确认订单按钮被遮挡 */
button[name="submit"],
input[type="submit"],
.btn-submit,
.completeBtn .btn,
#submit-form button[type="submit"],
form button[type="submit"] {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  touch-action: manipulation;
}
@media (max-width: 991.98px) {
  /* 7. 移动端让 page-content 不再 overflow:hidden 拦截点击 */
  .page-content,
  .main-content,
  .container-fluid {
    overflow: visible !important;
  }
  /* 8. 防止 iOS Safari 300ms 延迟影响点击 */
  a, button {
    touch-action: manipulation;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1d23 !important;
    color: #e4e6eb !important;
  }
  .vertical-menu {
    background: #252830 !important;
  }
  #sidebar-menu a {
    color: #b0b3b8 !important;
  }
  #sidebar-menu a:hover,
  #sidebar-menu a.active {
    color: #fff !important;
    background: #2d3039 !important;
  }
  #sidebar-menu .has-arrow::after {
    border-color: #b0b3b8 !important;
  }
  #page-topbar {
    background: #252830 !important;
    border-bottom: 1px solid #2d3039;
  }
  .navbar-header {
    background: #252830 !important;
  }
  .footer {
    background: #252830 !important;
    color: #b0b3b8 !important;
  }
  .dropdown-menu {
    background: #252830 !important;
    border-color: #2d3039 !important;
  }
  .dropdown-item {
    color: #e4e6eb !important;
  }
  .dropdown-item:hover {
    background: #2d3039 !important;
  }
  .table {
    color: #e4e6eb !important;
  }
  .table th,
  .table td {
    border-color: #2d3039 !important;
  }
  .card {
    background: #252830 !important;
    border-color: #2d3039 !important;
  }
  .form-control {
    background: #1a1d23 !important;
    color: #e4e6eb !important;
    border-color: #2d3039 !important;
  }
  .modal-content {
    background: #252830 !important;
    color: #e4e6eb !important;
  }
  .close {
    color: #e4e6eb !important;
  }
}