.balance-snapshot-page {
  width: 100%;
  min-height: 100vh;
  padding: clamp(12px, 1.8vw, 26px);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--erp-primary, #2563eb) 14%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--erp-bg, #f8fafc) 94%, #fff), var(--erp-bg, #f8fafc));
}

.balance-hero,
.balance-toolbar,
.balance-summary article,
.balance-card {
  border: 1px solid color-mix(in srgb, var(--erp-border, #dbe3ef) 82%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--erp-surface, #fff) 96%, transparent);
  box-shadow: 0 20px 55px rgba(15, 23, 42, .07);
}

.balance-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: clamp(20px, 2.6vw, 34px);
  color: #fff;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--erp-sidebar, #0f172a) 94%, #111827), color-mix(in srgb, var(--erp-primary, #2563eb) 76%, #0f172a));
}

.balance-hero-text span {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #dbeafe;
  font-weight: 900;
}

.balance-hero h1 {
  margin: 12px 0 8px;
  font-weight: 950;
  font-size: clamp(1.65rem, 2.8vw, 2.9rem);
}

.balance-hero p {
  margin: 0;
  max-width: 780px;
  color: rgba(255, 255, 255, .84);
}

.balance-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.balance-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px;
}

.balance-tabs,
.balance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.balance-tabs button {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  color: var(--erp-muted, #64748b);
  background: color-mix(in srgb, var(--erp-primary, #2563eb) 7%, #fff);
  font-weight: 900;
}

.balance-tabs button.active {
  color: #fff;
  background: var(--erp-primary, #2563eb);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--erp-primary, #2563eb) 28%, transparent);
}

.balance-search,
.balance-select {
  min-width: min(100%, 300px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--erp-border, #dbe3ef);
  border-radius: 15px;
  background: #fff;
}

.balance-unposted-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid #f0d08b;
  border-radius: 15px;
  color: #7c5311;
  background: #fffaf0;
  cursor: pointer;
}

.balance-unposted-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.balance-unposted-toggle > span:last-child { display: grid; }
.balance-unposted-toggle strong { font-size: .82rem; font-weight: 950; }
.balance-unposted-toggle small { color: #9a6c21; font-size: .68rem; font-weight: 700; }
.balance-toggle-track { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 20px; background: #d4dbe4; transition: .2s ease; }
.balance-toggle-track i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .2); transition: .2s ease; }
.balance-unposted-toggle > input:checked + .balance-toggle-track { background: #d29327; }
.balance-unposted-toggle > input:checked + .balance-toggle-track i { transform: translateX(-16px); }
.balance-unposted-toggle:has(input:checked) { border-color: #d29327; background: #fff5d9; }

.balance-select {
  min-width: min(100%, 250px);
}

.balance-select span {
  color: var(--erp-muted, #64748b);
  font-weight: 900;
  white-space: nowrap;
}

.balance-search input,
.balance-select select {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
}

.balance-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.balance-summary article {
  padding: 16px;
}

.balance-summary span {
  display: block;
  color: var(--erp-muted, #64748b);
  font-weight: 800;
  font-size: .9rem;
}

.balance-summary strong {
  display: block;
  margin-top: 8px;
  color: var(--erp-heading, #0f172a);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 950;
}

.positive { color: #047857 !important; }
.negative { color: #b91c1c !important; }
.zero { color: #64748b !important; }

.balance-card {
  margin-top: 16px;
  overflow: hidden;
}

.balance-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--erp-border, #dbe3ef) 70%, transparent);
}

.balance-card-head h2 {
  margin: 0;
  color: var(--erp-heading, #0f172a);
  font-size: 1.15rem;
  font-weight: 950;
}

.balance-card-head p,
.balance-card-head span {
  margin: 5px 0 0;
  color: var(--erp-muted, #64748b);
  font-weight: 700;
}

.balance-table-wrap {
  overflow-x: auto;
}

.balance-table {
  min-width: 1080px;
  margin: 0;
}

.balance-table thead th {
  padding: 15px;
  color: var(--erp-table-head-text, #334155);
  background: var(--erp-table-head, #eaf0f6);
  white-space: nowrap;
  font-weight: 950;
}

.balance-table td {
  padding: 14px 15px;
  vertical-align: middle;
  border-color: color-mix(in srgb, var(--erp-border, #dbe3ef) 75%, transparent);
}

.balance-table tbody tr:hover {
  background: color-mix(in srgb, var(--erp-primary, #2563eb) 5%, transparent);
}

.balance-party strong,
.balance-account strong {
  display: block;
  color: var(--erp-heading, #0f172a);
}

.balance-party small,
.balance-account small,
.balance-last {
  color: var(--erp-muted, #64748b);
}

.balance-account + .balance-account {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--erp-border, #dbe3ef);
}

.balance-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #1e3a8a;
  background: #eff6ff;
  font-weight: 900;
  white-space: nowrap;
}

.balance-badge.both {
  color: #7c2d12;
  background: #fff7ed;
}

.balance-value {
  font-weight: 950;
  direction: ltr;
  text-align: end;
  white-space: nowrap;
}

.balance-value small { display: block; margin-top: 4px; color: #78869a; font-size: .68rem; font-weight: 750; }
.balance-pending-row td { background: #fffcf2; }
.balance-pending-row td:first-child { border-right: 3px solid #d99a2b; }
.balance-pending-account,
.balance-pending-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 7px; border-radius: 999px; color: #855509; background: #ffedb5; font-size: .68rem; font-weight: 900; }
.balance-pending-badge { display: flex; width: max-content; }

.balance-ledger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.balance-empty {
  padding: 34px !important;
  text-align: center;
  color: var(--erp-muted, #64748b);
}

@media (max-width: 1200px) {
  .balance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .balance-hero,
  .balance-toolbar,
  .balance-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .balance-hero-actions,
  .balance-filters,
  .balance-tabs {
    justify-content: stretch;
  }

  .balance-hero-actions .btn,
  .balance-tabs button,
  .balance-search,
  .balance-select {
    width: 100%;
  }

  .balance-unposted-toggle { width: 100%; }

  .balance-summary {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body {
    background: #fff !important;
  }

  .no-print,
  .sidebar,
  .acc-sidebar,
  .balance-toolbar,
  .balance-hero-actions {
    display: none !important;
  }

  .balance-snapshot-page {
    padding: 0 !important;
    background: #fff !important;
  }

  .balance-hero,
  .balance-card,
  .balance-summary article {
    box-shadow: none !important;
    border-color: #111827 !important;
    background: #fff !important;
    color: #111827 !important;
  }

  .balance-hero {
    padding: 10px 14px !important;
  }

  .balance-hero-text span,
  .balance-hero p {
    color: #111827 !important;
  }

  .balance-summary {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .balance-summary article {
    padding: 8px;
  }

  .balance-table {
    min-width: 0;
    width: 100%;
    font-size: 10px;
  }

  .balance-table th,
  .balance-table td {
    padding: 6px !important;
    border: 1px solid #111827 !important;
  }
}