/*
 * Mobile list-page experience
 * Scope: settlement / receipt / station / account main pages.
 * Loaded last so this layer can resolve older responsive-rule conflicts.
 */
.mobile-card-more-cell {
  display: none;
}

.mobile-filter-backdrop,
.mobile-filter-drawer-head,
.mobile-filter-count {
  display: none;
}

@media (max-width: 767.98px) {
  /* The parent is a two-column grid, so Bootstrap columns must fill each cell. */
  .hz-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hz-metric-grid > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  .hz-metric-grid .metric-card {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: .9rem !important;
  }

  .hz-metric-grid .metric-card strong {
    font-size: clamp(1.15rem, 6vw, 1.45rem) !important;
    overflow-wrap: anywhere;
  }

  /* Important actions stay visible without a hidden horizontal swipe. */
  .hz-workspace-card .hz-workspace-actions,
  .hz-workspace-card .settlement-actionbar,
  .hz-workspace-card .receipt-hero-actions,
  .hz-workspace-card .station-list-hero-actions,
  .hz-workspace-card .account-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hz-workspace-card .hz-workspace-actions > .btn,
  .hz-workspace-card .hz-workspace-actions > .action-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: .55rem .45rem !important;
    font-size: .76rem !important;
  }

  .hz-workspace-card .hz-workspace-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Quick filters plus one native details trigger; no duplicate JS toggle. */
  .hz-filter-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .55rem !important;
  }

  .hz-filter-toolbar .hz-quick-filter {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .42rem !important;
    padding: .48rem !important;
  }

  .hz-filter-toolbar .hz-filter-toolbar-more {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .hz-filter-toolbar .hz-advanced-summary {
    min-height: 36px;
    padding: .38rem .68rem;
    border: 1px solid rgba(7, 91, 136, .12);
    border-radius: 999px;
    background: #fff;
  }

  .mobile-filter-toggle {
    display: none !important;
  }

  /* Shared card shell: calmer surface, stronger hierarchy, less table feel. */
  .settlement-table-card tbody,
  .receipt-table-panel tbody,
  .station-list-table-card tbody,
  .account-table-panel tbody {
    display: grid !important;
    gap: .56rem !important;
    padding: .56rem !important;
    background: #f2f7fa !important;
  }

  .settlement-table-card tbody tr,
  .receipt-table-panel tbody tr,
  .station-list-table-card tbody tr,
  .account-table-panel tbody tr {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .74rem !important;
    border: 1px solid rgba(7, 91, 136, .1) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(19, 61, 86, .055) !important;
  }

  .receipt-table-panel tbody tr { border-left: 3px solid #62b6d2 !important; }
  .station-list-table-card tbody tr { border-left: 3px solid #72bc94 !important; }
  .account-table-panel tbody tr { border-left: 3px solid #9396cf !important; }
  .settlement-table-card tbody tr { border-left: 3px solid #5b9fbe !important; }

  .hz-table-panel tbody td::before {
    color: #8a9da9 !important;
    -webkit-text-fill-color: #8a9da9 !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
  }

  .hz-table-panel tbody td.mobile-index-cell {
    top: .8rem !important;
    right: .8rem !important;
  }

  .hz-table-panel .hz-index-badge {
    width: 24px !important;
    height: 24px !important;
    color: #7890a0 !important;
    -webkit-text-fill-color: #7890a0 !important;
    font-size: .66rem !important;
    background: #f1f5f7 !important;
    box-shadow: none !important;
  }

  .hz-table-panel tbody td.mobile-title-cell,
  .hz-table-panel tbody td.mobile-primary-cell {
    background: transparent !important;
  }

  .hz-table-panel tbody tr:not(.mobile-card-expanded) .mobile-card-secondary {
    display: none !important;
  }

  .settlement-table-card tbody tr.mobile-card-expanded .mobile-card-secondary {
    display: flex !important;
  }

  .station-list-table-card tbody tr.mobile-card-expanded .mobile-card-secondary,
  .account-table-panel tbody tr.mobile-card-expanded .mobile-card-secondary {
    display: block !important;
  }

  .hz-table-panel tbody td.mobile-card-more-cell {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-area: more;
    margin: .1rem 0 0 !important;
    padding: .62rem 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(7, 91, 136, .1) !important;
    background: transparent !important;
    text-align: center !important;
  }

  .hz-table-panel tbody td.mobile-card-more-cell::before {
    display: none !important;
  }

  .mobile-card-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: .34rem .72rem;
    border: 0;
    border-radius: 999px;
    background: #edf6fa;
    color: #075b88;
    font-size: .75rem;
    font-weight: 800;
  }

  .mobile-card-more-toggle::after {
    content: "⌄";
    margin-left: .35rem;
    transition: transform .18s ease;
  }

  .mobile-card-more-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Receipt: total amount is the hero; allocation figures form a pair. */
  .receipt-table-panel tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "date date"
      "title title"
      "account account"
      "amount amount"
      "allocated unallocated"
      "status action" !important;
    gap: .38rem !important;
  }

  .receipt-table-panel tbody td {
    width: auto !important;
    margin: 0 !important;
  }

  .receipt-table-panel .receipt-card-date,
  .receipt-table-panel .receipt-card-title,
  .receipt-table-panel .receipt-card-account,
  .receipt-table-panel .receipt-card-amount,
  .receipt-table-panel .receipt-card-status,
  .receipt-table-panel td[data-label="操作"] {
    grid-column: 1 / -1;
  }

  .receipt-table-panel .receipt-card-date { grid-area: date; }
  .receipt-table-panel .receipt-card-title { grid-area: title; }
  .receipt-table-panel .receipt-card-account { grid-area: account; }
  .receipt-table-panel .receipt-card-amount { grid-area: amount; }
  .receipt-table-panel .receipt-card-allocated { grid-area: allocated; }
  .receipt-table-panel .receipt-card-unallocated { grid-area: unallocated; }
  .receipt-table-panel .receipt-card-status { grid-area: status; }
  .receipt-table-panel td[data-label="操作"] {
    grid-area: action;
    grid-column: auto;
  }

  .receipt-table-panel .receipt-card-title {
    padding: 0 2.5rem .38rem 0 !important;
  }

  .receipt-table-panel .receipt-card-account {
    margin: 0 !important;
  }

  .receipt-table-panel .receipt-card-amount,
  .receipt-table-panel .receipt-card-allocated,
  .receipt-table-panel .receipt-card-unallocated {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-height: 48px !important;
    padding: .48rem .58rem !important;
    border-radius: 12px !important;
  }

  .receipt-table-panel .receipt-card-amount {
    font-size: 1rem !important;
  }

  .receipt-table-panel .receipt-card-unallocated {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .receipt-table-panel .receipt-card-status {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: .26rem 0 !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
  }

  .receipt-table-panel td[data-label="操作"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: .38rem !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
    background: transparent !important;
    text-align: right !important;
  }

  .receipt-table-panel td[data-label="操作"]::before {
    display: none !important;
  }

  .receipt-table-panel td[data-label="操作"] .hz-list-row-actions {
    width: auto !important;
  }

  .receipt-table-panel td[data-label="操作"] .hz-list-action {
    min-height: 34px !important;
    padding: .4rem .72rem !important;
  }

  /* Station: archive sections read as grouped facts, actions share a row. */
  .station-list-table-card tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "title title"
      "capacity status"
      "subject subject"
      "rule rule"
      "monthly edit"
      "more more" !important;
    gap: .4rem !important;
  }

  .station-list-table-card tbody td {
    width: auto !important;
    margin: 0 !important;
  }

  .station-list-table-card .station-name-col,
  .station-list-table-card tbody td:nth-child(4),
  .station-list-table-card tbody td:nth-child(5) {
    grid-column: 1 / -1;
  }

  .station-list-table-card .station-name-col {
    grid-area: title;
    padding: 0 2.5rem .4rem 0 !important;
  }

  .station-list-table-card tbody td:nth-child(3) { grid-area: capacity; }
  .station-list-table-card tbody td:nth-child(4) { grid-area: subject; }
  .station-list-table-card tbody td:nth-child(5) { grid-area: rule; }
  .station-list-table-card tbody td:nth-child(6) { grid-area: status; }
  .station-list-table-card tbody td:nth-child(7) { grid-area: monthly; }
  .station-list-table-card tbody td:nth-child(8) { grid-area: edit; }

  .station-list-table-card tbody td:nth-child(4),
  .station-list-table-card tbody td:nth-child(5) {
    display: block !important;
    padding: .52rem !important;
    border: 1px solid rgba(7, 91, 136, .08) !important;
    border-radius: 12px !important;
    background: #f6fafc !important;
    text-align: left !important;
  }

  .station-list-table-card tbody td:nth-child(4)::before,
  .station-list-table-card tbody td:nth-child(5)::before {
    display: block !important;
    margin-bottom: .35rem;
  }

  .station-list-table-card .mobile-action-cell {
    grid-column: auto !important;
    margin: 0 !important;
    padding-top: .38rem !important;
    background: transparent !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
  }

  .station-list-table-card tbody td:nth-child(6) {
    background: transparent !important;
  }

  .station-list-table-card .mobile-action-cell .hz-list-action {
    width: 100% !important;
    min-height: 36px !important;
  }

  .station-list-table-card .mobile-action-cell .hz-list-action.primary,
  .station-list-table-card .mobile-action-cell .hz-list-action.primary:visited {
    border-color: #087aa8 !important;
    background: #087aa8 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  }

  .station-list-table-card .mobile-action-cell .hz-list-action.primary:hover,
  .station-list-table-card .mobile-action-cell .hz-list-action.primary:focus,
  .station-list-table-card .mobile-action-cell .hz-list-action.primary:active {
    border-color: #075b88 !important;
    background: #075b88 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Account: bank, links and invoice facts become distinct sections. */
  .account-table-panel tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "bank bank"
      "business business"
      "invoice invoice"
      "status action"
      "more more" !important;
    gap: .4rem !important;
  }

  .account-table-panel tbody td {
    width: auto !important;
    margin: 0 !important;
  }

  .account-table-panel .account-card-title,
  .account-table-panel .account-card-bank,
  .account-table-panel .account-card-business,
  .account-table-panel .account-card-invoice {
    grid-column: 1 / -1;
  }

  .account-table-panel .account-card-title {
    grid-area: title;
    padding: 0 2.5rem .38rem 0 !important;
  }

  .account-table-panel .account-card-bank { grid-area: bank; }
  .account-table-panel .account-card-business { grid-area: business; }
  .account-table-panel .account-card-invoice { grid-area: invoice; }
  .account-table-panel .account-card-status { grid-area: status; }
  .account-table-panel .mobile-action-cell { grid-area: action; }

  .account-table-panel .account-card-bank,
  .account-table-panel .account-card-business,
  .account-table-panel .account-card-invoice {
    margin: 0 !important;
    padding: .52rem !important;
    border-radius: 12px !important;
  }

  .account-table-panel .account-card-status {
    align-self: center;
    background: transparent !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
    padding-top: .38rem !important;
  }

  .account-table-panel .mobile-action-cell {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
    background: transparent !important;
    padding-top: .38rem !important;
  }

  .account-table-panel .mobile-action-cell .hz-list-row-actions {
    justify-content: flex-end !important;
  }

  .account-table-panel .mobile-action-cell .hz-list-action {
    min-height: 34px !important;
    padding: .4rem .72rem !important;
  }

  /* Settlement: preserve detail, but group it into scan-friendly rows. */
  .settlement-table-card tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "period period"
      "station station"
      "generation generation"
      "ratio hours"
      "receivable receivable"
      "paid paid"
      "unpaid unpaid"
      "aging aging"
      "workflow payment"
      "action action"
      "more more" !important;
    gap: .38rem !important;
  }

  .settlement-table-card tbody td {
    width: auto !important;
    margin: 0 !important;
  }

  .settlement-table-card .batch-select-col:not(.show) {
    display: none !important;
  }

  .settlement-table-card .batch-select-col.show {
    display: flex !important;
  }

  .settlement-table-card .batch-select-col,
  .settlement-table-card .settlement-period-cell,
  .settlement-table-card .settlement-station-cell,
  .settlement-table-card .settlement-generation-cell,
  .settlement-table-card .settlement-receivable-amount,
  .settlement-table-card .settlement-action-cell {
    grid-column: 1 / -1 !important;
  }

  .settlement-table-card .settlement-period-cell {
    grid-area: period;
    padding: 0 2.5rem .08rem 0 !important;
  }

  .settlement-table-card .settlement-station-cell {
    grid-area: station;
    padding: 0 2.5rem .38rem 0 !important;
  }

  .settlement-table-card .settlement-generation-cell { grid-area: generation; }
  .settlement-table-card .settlement-generation-ratio { grid-area: ratio; }
  .settlement-table-card .settlement-utilization-hours { grid-area: hours; }
  .settlement-table-card .settlement-receivable-amount { grid-area: receivable; }
  .settlement-table-card .settlement-paid-amount { grid-area: paid; }
  .settlement-table-card .settlement-unpaid-amount { grid-area: unpaid; }
  .settlement-table-card tbody td:nth-last-child(5) { grid-area: aging; }
  .settlement-table-card tbody td:nth-last-child(4) { grid-area: workflow; }
  .settlement-table-card tbody td:nth-last-child(3) { grid-area: payment; }
  .settlement-table-card .settlement-action-cell { grid-area: action; }

  .settlement-table-card .settlement-generation-cell,
  .settlement-table-card .settlement-receivable-amount,
  .settlement-table-card .settlement-paid-amount,
  .settlement-table-card .settlement-unpaid-amount {
    min-height: 50px !important;
    padding: .5rem !important;
    border: 1px solid rgba(7, 91, 136, .08) !important;
    border-radius: 12px !important;
    background: #f5f9fb !important;
  }

  .settlement-table-card .settlement-receivable-amount { background: #edf7fc !important; }
  .settlement-table-card .settlement-paid-amount { background: #edf8f2 !important; }
  .settlement-table-card .settlement-unpaid-amount { background: #fdf1f1 !important; }

  .settlement-table-card .settlement-action-cell {
    padding-top: .45rem !important;
    border-top: 1px solid rgba(7, 91, 136, .09) !important;
  }

  .settlement-table-card .settlement-row-action {
    min-height: 36px !important;
  }

  .hz-table-panel tbody td.mobile-title-cell a,
  .hz-table-panel tbody td.mobile-title-cell .receipt-cell-main,
  .hz-table-panel tbody td.mobile-title-cell .station-name-main,
  .hz-table-panel tbody td.mobile-title-cell .account-name-link {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Deterministic pages suit management workflows. Phones get a compact
     previous/current/next control instead of a dense page-number row. */
  .hz-pagination-bar {
    gap: .5rem !important;
    padding: .78rem !important;
  }

  .hz-pagination-meta {
    font-size: .72rem !important;
  }

  .hz-page-size {
    display: none !important;
  }

  .hz-pagination-controls,
  .hz-pagination-controls nav {
    width: 100%;
  }

  .hz-pagination-controls nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .6rem;
  }

  .hz-mobile-page-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #607b8d;
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .hz-pagination {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .hz-pagination .page-item:not(:first-child):not(:last-child) {
    display: none !important;
  }

  .hz-pagination .page-link {
    min-width: 70px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
  }
}

@media (min-width: 768px) {
  .hz-mobile-page-indicator {
    display: none;
  }
}

/* Card hierarchy refinement: business status replaces the low-value row index
   in the top-right corner, while actions become a predictable bottom bar. */
@media (max-width: 767.98px) {
  .hz-metric-grid .metric-card {
    min-height: 94px !important;
    padding: .72rem .78rem !important;
    gap: .24rem !important;
  }

  .receipt-page > .receipt-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .receipt-page > .row.g-3.mb-3.receipt-summary-grid > div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  .receipt-page > .receipt-summary-grid .metric-card {
    min-width: 0 !important;
    min-height: 94px !important;
    padding: .72rem .78rem !important;
    gap: .24rem !important;
  }

  .receipt-page > .receipt-summary-grid .metric-card small {
    font-size: .7rem !important;
  }

  .receipt-page > .receipt-summary-grid .metric-card strong {
    font-size: clamp(1.08rem, 5.4vw, 1.32rem) !important;
    overflow-wrap: anywhere;
  }

  .hz-metric-grid .metric-card small {
    font-size: .7rem !important;
  }

  .hz-metric-grid .metric-card strong {
    font-size: clamp(1.08rem, 5.4vw, 1.32rem) !important;
  }

  .hz-metric-grid .metric-card .summary-time {
    margin-top: .2rem !important;
    padding: .18rem .4rem !important;
    font-size: .62rem !important;
  }

  .hz-workspace-card .hz-workspace-actions {
    grid-template-columns: 1fr !important;
  }

  .hz-workspace-card .hz-workspace-actions > .mobile-secondary-action {
    display: none !important;
  }

  .hz-workspace-card .hz-workspace-actions > .mobile-primary-action {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
  }

  .mobile-page-actions-more {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
  }

  .mobile-page-actions-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .7rem;
    border: 1px solid rgba(7, 91, 136, .12);
    border-radius: 999px;
    background: #fff;
    color: #075b88;
    font-size: .76rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
  }

  .mobile-page-actions-more > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-page-actions-more > summary::after {
    content: "⌄";
    margin-left: .38rem;
    transition: transform .18s ease;
  }

  .mobile-page-actions-more[open] > summary::after {
    transform: rotate(180deg);
  }

  .mobile-page-actions-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-top: .5rem;
    padding: .55rem;
    border: 1px solid rgba(7, 91, 136, .09);
    border-radius: 14px;
    background: #f5f9fb;
  }

  .mobile-page-actions-panel .btn,
  .mobile-page-actions-panel .action-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: .48rem .4rem !important;
    font-size: .72rem !important;
  }

  .mobile-card-clickable {
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease !important;
  }

  .mobile-card-clickable:active {
    transform: scale(.992);
    box-shadow: 0 3px 12px rgba(19, 61, 86, .045) !important;
  }

  .hz-table-panel tbody td.mobile-index-cell {
    display: none !important;
  }

  .receipt-table-panel tbody tr {
    grid-template-areas:
      "date date"
      "title title"
      "account account"
      "amount amount"
      "allocated unallocated"
      "action action" !important;
  }

  .receipt-table-panel .receipt-card-date {
    padding-right: 5.5rem !important;
  }

  .receipt-table-panel .receipt-card-title {
    padding-right: 5.5rem !important;
  }

  .receipt-table-panel .receipt-card-status {
    position: absolute !important;
    top: .72rem !important;
    right: .72rem !important;
    z-index: 2;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .receipt-table-panel .receipt-card-status::before {
    display: none !important;
  }

  .receipt-table-panel .mobile-action-cell {
    grid-area: action;
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: stretch !important;
    text-align: center !important;
  }

  .receipt-table-panel .mobile-action-cell::before {
    display: none !important;
  }

  .receipt-table-panel .mobile-action-cell .hz-list-row-actions,
  .receipt-table-panel .mobile-action-cell .hz-list-action {
    width: 100% !important;
  }

  .station-list-table-card tbody tr {
    grid-template-areas:
      "title title"
      "capacity capacity"
      "subject subject"
      "rule rule"
      "monthly edit"
      "more more" !important;
  }

  .station-list-table-card .station-name-col {
    padding-right: 5.25rem !important;
  }

  .station-list-table-card .station-card-status {
    position: absolute !important;
    top: .72rem !important;
    right: .72rem !important;
    z-index: 2;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .station-list-table-card .station-card-status::before {
    display: none !important;
  }

  .account-table-panel tbody tr {
    grid-template-areas:
      "title title"
      "bank bank"
      "business business"
      "invoice invoice"
      "action action"
      "more more" !important;
  }

  .account-table-panel .account-card-title {
    padding-right: 4.75rem !important;
  }

  .account-table-panel .account-card-status {
    position: absolute !important;
    top: .72rem !important;
    right: .72rem !important;
    z-index: 2;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .account-table-panel .account-card-status::before {
    display: none !important;
  }

  .account-table-panel .mobile-action-cell {
    grid-area: action;
    grid-column: 1 / -1 !important;
  }

  .account-table-panel .mobile-action-cell .hz-list-row-actions,
  .account-table-panel .mobile-action-cell .hz-list-action {
    width: 100% !important;
  }

  .settlement-table-card tbody tr {
    grid-template-areas:
      "period period"
      "station station"
      "generation generation"
      "ratio hours"
      "receivable receivable"
      "paid paid"
      "unpaid unpaid"
      "aging aging"
      "workflow workflow"
      "action action"
      "more more" !important;
  }

  .settlement-table-card .settlement-period-cell,
  .settlement-table-card .settlement-station-cell {
    padding-right: 5.25rem !important;
  }

  .settlement-table-card .settlement-payment-status-cell {
    position: absolute !important;
    top: .72rem !important;
    right: .72rem !important;
    z-index: 2;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .settlement-table-card .settlement-payment-status-cell::before {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-page-actions-more {
    display: none !important;
  }
}

/* Next-round mobile UX: load-more lists, bottom-sheet filters, consistent
   monetary hierarchy, explicit empty/error/loading states. */
@media (max-width: 767.98px) {
  body.mobile-filter-drawer-open {
    overflow: hidden !important;
  }

  .hz-filter-toolbar .hz-advanced-summary {
    position: relative;
    padding-right: 2rem !important;
  }

  .mobile-filter-count {
    position: absolute;
    top: 50%;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #087aa8;
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    transform: translateY(-50%);
  }

  .mobile-filter-backdrop {
    z-index: 1070;
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(9, 33, 48, .42);
    backdrop-filter: blur(2px);
  }

  .hz-filter-section.mobile-filter-open .mobile-filter-backdrop {
    display: block;
  }

  .hz-filter-section .hz-filter-panel {
    z-index: 1080 !important;
  }

  .hz-filter-section.mobile-filter-open .hz-filter-panel {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(78vh, 680px) !important;
    margin: 0 !important;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -18px 50px rgba(12, 45, 64, .2) !important;
    animation: mobile-filter-rise .2s ease-out;
  }

  .mobile-filter-drawer-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin: 0 -1rem .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid rgba(7, 91, 136, .08);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
  }

  .mobile-filter-drawer-head strong {
    color: #153f55;
    font-size: .98rem;
  }

  .mobile-filter-drawer-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #edf5f8;
    color: #31596c;
    font-size: 1.25rem;
  }

  .hz-filter-section:not(.mobile-filter-open) .mobile-filter-drawer-head {
    display: none;
  }

  .hz-filter-section.mobile-filter-open .hz-filter-grid,
  .hz-filter-section.mobile-filter-open .settlement-filter-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .72rem !important;
  }

  .hz-filter-section.mobile-filter-open .hz-filter-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
    gap: .55rem !important;
    margin: .35rem -1rem -1rem !important;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 24px rgba(12, 45, 64, .08);
  }

  .hz-filter-section form.is-submitting {
    opacity: .72;
    pointer-events: none;
  }

  .hz-pagination-controls,
  .hz-pagination-meta {
    display: none !important;
  }

  .hz-pagination-bar {
    display: block !important;
    padding: .85rem .15rem .2rem !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .mobile-load-more {
    display: grid;
    gap: .55rem;
    justify-items: center;
    width: 100%;
  }

  .mobile-load-more-status {
    color: #718795;
    font-size: .72rem;
    font-weight: 650;
  }

  .mobile-load-more-button {
    width: min(100%, 260px);
    min-height: 42px;
    padding: .58rem 1rem;
    border: 1px solid rgba(7, 91, 136, .14);
    border-radius: 999px;
    background: #fff;
    color: #075b88;
    font-size: .8rem;
    font-weight: 850;
    box-shadow: 0 5px 16px rgba(19, 61, 86, .06);
  }

  .mobile-load-more-button.is-loading::before,
  button.is-loading::before {
    content: "";
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .42rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.12rem;
    animation: mobile-list-spin .7s linear infinite;
  }

  .mobile-load-more.is-complete .mobile-load-more-status::after {
    content: " · 已全部加载";
    color: #4f8a70;
  }

  .mobile-load-more.has-error .mobile-load-more-status {
    color: #b44242;
  }

  .hz-table-panel tbody tr.mobile-list-skeleton {
    display: block !important;
    min-height: 116px !important;
    padding: .85rem !important;
    pointer-events: none;
  }

  .hz-table-panel tbody tr.mobile-list-skeleton td {
    display: grid !important;
    gap: .58rem !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .mobile-list-skeleton td::before {
    display: none !important;
  }

  .mobile-list-skeleton span {
    display: block;
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf3f6 25%, #f8fbfc 45%, #edf3f6 65%);
    background-size: 240% 100%;
    animation: mobile-list-shimmer 1.15s ease-in-out infinite;
  }

  .mobile-list-skeleton span:nth-child(1) { width: 42%; height: 18px; }
  .mobile-list-skeleton span:nth-child(2) { width: 78%; }
  .mobile-list-skeleton span:nth-child(3) { width: 58%; }

  .hz-table-panel tbody td.hz-empty-state-cell {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 1.35rem 1rem !important;
    border: 0 !important;
  }

  .hz-empty-state-cell::before {
    display: none !important;
  }

  .hz-empty-state {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 1.2rem .8rem;
    color: #718795;
    text-align: center;
  }

  .hz-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .2rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #eaf5f8, #f5fafb);
    color: #1680a7;
    font-size: 1.35rem;
  }

  .hz-empty-state strong {
    color: #31596c;
    font-size: .9rem;
  }

  .hz-empty-state span:last-child {
    max-width: 16rem;
    font-size: .74rem;
    line-height: 1.55;
  }

  .hz-table-panel tbody td[class*="amount"],
  .hz-table-panel .hz-amount-primary,
  .hz-table-panel .hz-amount-success,
  .hz-table-panel .hz-amount-danger,
  .hz-table-panel .hz-amount-muted {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
  }

  .hz-table-panel .hz-amount-primary,
  .receipt-card-amount,
  .settlement-receivable-amount {
    color: #075b88 !important;
    font-weight: 900 !important;
  }

  .hz-table-panel .hz-amount-success,
  .receipt-card-allocated,
  .settlement-paid-amount {
    color: #25805d !important;
    font-weight: 800 !important;
  }

  .hz-table-panel .hz-amount-danger,
  .receipt-card-unallocated,
  .settlement-unpaid-amount {
    color: #bc3e45 !important;
    font-weight: 900 !important;
  }

  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-receivable-amount,
  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-receivable-amount .settlement-amount-main {
    color: #075b88 !important;
    font-weight: 900 !important;
  }

  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-paid-amount,
  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-paid-amount .settlement-amount-main {
    color: #25805d !important;
    font-weight: 800 !important;
  }

  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-unpaid-amount,
  body .settlement-table-card table.settlement-ledger-table tbody td.settlement-unpaid-amount .settlement-amount-main {
    color: #bc3e45 !important;
    font-weight: 900 !important;
  }

  .receipt-status,
  .workflow-badge,
  .hz-table-panel .badge {
    min-height: 24px;
    padding: .28rem .55rem !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  .receipt-cell-sub,
  .account-business-empty,
  .settlement-amount-tip {
    color: #7d909b !important;
    font-size: .68rem !important;
    line-height: 1.45 !important;
  }

  .receipt-card-title .receipt-cell-sub + .receipt-cell-sub {
    display: none;
  }
}

@keyframes mobile-filter-rise {
  from { transform: translateY(24px); opacity: .55; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes mobile-list-spin {
  to { transform: rotate(360deg); }
}

@keyframes mobile-list-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}