/* AELIN Finance mobile layout — comfortable at 320px–700px without clipped content. */
@media (max-width: 700px) {
  #keuangan,
  #financeHost,
  #keuangan [data-finance-panel],
  #shopeeCapitalPanel,
  #shopeeCapitalPanel .sc-shell {
    min-width: 0;
    max-width: 100%;
  }

  #financeTabs.finance-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 7px;
  }

  #financeTabs.finance-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 8px;
    white-space: normal;
  }

  .finance-card > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .finance-card > header > :is(strong, span, button),
  .finance-card > header > div {
    max-width: 100%;
  }

  .finance-card > header > .finance-header-total {
    font-size: 17px;
  }

  .finance-link,
  .finance-small,
  .finance-form-actions .btn,
  .finance-row-actions .finance-small {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }

  .finance-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .finance-form-actions .btn {
    min-width: 0;
    width: 100%;
  }

  /* Desktop finance tables become readable transaction cards on a phone. */
  .finance-table-wrap {
    max-width: 100%;
    overflow: visible;
  }

  .finance-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .finance-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .finance-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
    width: 100%;
  }

  .finance-table tbody tr {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e6dac8;
    border-radius: 13px;
    background: #fffdf9;
    box-shadow: 0 3px 10px rgba(50, 38, 24, 0.04);
  }

  .finance-table tbody tr:nth-child(even) {
    background: #fcf8f2;
  }

  .finance-table td,
  .finance-table tbody tr:nth-child(even) td,
  .finance-opening-row td {
    display: grid;
    grid-template-columns: minmax(92px, 0.44fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-top: 1px solid #eee5d8;
    background: transparent !important;
    overflow-wrap: anywhere;
  }

  .finance-table td:first-child {
    border-top: 0;
  }

  .finance-table td::before {
    color: #806643;
    content: '';
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .finance-table td > * {
    min-width: 0;
  }

  .finance-table td[colspan] {
    display: block;
    padding: 22px 14px !important;
    text-align: center;
  }

  .finance-table td[colspan]::before {
    content: none !important;
  }

  #financeLedgerRows td:nth-child(1)::before { content: 'Tanggal'; }
  #financeLedgerRows td:nth-child(2)::before { content: 'Jenis'; }
  #financeLedgerRows td:nth-child(3)::before { content: 'Keterangan'; }
  #financeLedgerRows td:nth-child(4)::before { content: 'Rekening'; }
  #financeLedgerRows td:nth-child(5)::before { content: 'Jumlah'; }
  #financeLedgerRows td:nth-child(6)::before { content: 'Status'; }
  #financeLedgerRows td:nth-child(7)::before { content: 'Aksi'; }

  #financePayableRows td:nth-child(1)::before { content: 'Pihak'; }
  #financePayableRows td:nth-child(2)::before { content: 'Tagihan'; }
  #financePayableRows td:nth-child(3)::before { content: 'Jatuh tempo'; }
  #financePayableRows td:nth-child(4)::before { content: 'Total'; }
  #financePayableRows td:nth-child(5)::before { content: 'Terbayar'; }
  #financePayableRows td:nth-child(6)::before { content: 'Sisa'; }
  #financePayableRows td:nth-child(7)::before { content: 'Status'; }
  #financePayableRows td:nth-child(8)::before { content: 'Aksi'; }

  #financePayrollBuilderRows td:nth-child(1)::before { content: 'Karyawan'; }
  #financePayrollBuilderRows td:nth-child(2)::before { content: 'Gaji pokok'; }
  #financePayrollBuilderRows td:nth-child(3)::before { content: 'Lembur'; }
  #financePayrollBuilderRows td:nth-child(4)::before { content: 'Bonus'; }
  #financePayrollBuilderRows td:nth-child(5)::before { content: 'Potongan absen'; }
  #financePayrollBuilderRows td:nth-child(6)::before { content: 'Kasbon via Piutang'; }
  #financePayrollBuilderRows td:nth-child(7)::before { content: 'Jadwal'; }
  #financePayrollBuilderRows td:nth-child(8)::before { content: 'Uang dibayar'; }

  .finance-table.payroll input {
    min-width: 0;
    min-height: 44px;
    width: 100%;
  }

  .finance-table td:last-child > .finance-small,
  .finance-row-actions,
  .finance-row-actions .finance-small {
    width: 100%;
  }

  .finance-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-employee-list article {
    align-items: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .finance-employee-list article > div:last-child {
    min-width: 108px;
  }

  .finance-payroll-item > strong {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  #shopeeCapitalPanel .sc-mapping-row select {
    min-height: 44px;
  }

  #shopeeCapitalPanel .sc-preview-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: #aabbd3 #eef3f8;
  }

  #shopeeCapitalPanel .sc-preview-table-wrap::before {
    content: 'Geser tabel ke samping untuk melihat kolom lainnya';
    display: block;
    position: sticky;
    left: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #d9e2ec;
    background: #eef3f8;
    color: #4f6884;
    font-size: 10px;
    font-weight: 750;
  }

  /* Pembiayaan usaha tetap ringkas dan terbaca tanpa geser ke samping. */
  .finance-business-loan-metrics,
  .finance-business-summary,
  .finance-business-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .finance-business-loan-metrics article,
  .finance-business-summary article,
  .finance-business-metrics article {
    padding: 14px;
  }

  .finance-business-loan-metrics article.remaining,
  .finance-business-summary article.remaining,
  .finance-business-metrics article.remaining {
    grid-column: 1 / -1;
  }

  .finance-business-loan-opening > summary {
    align-items: flex-start;
    padding: 15px;
  }

  .finance-business-loan-opening-note {
    padding: 12px 15px;
  }

  .finance-business-list,
  .finance-business-loan-list {
    gap: 12px;
    padding: 12px;
  }

  .finance-business-loan > header,
  .finance-business-loan-card > header,
  .finance-business-loan-head {
    display: grid;
    padding: 14px;
  }

  .finance-business-loan-totals,
  .finance-loan-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-business-loan-meta,
  .finance-loan-meta {
    grid-template-columns: 1fr;
    padding: 11px 12px;
  }

  .finance-business-payment,
  .finance-business-payment-form,
  .finance-business-loan-payment,
  .finance-loan-payment-form {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .finance-business-payment .wide,
  .finance-business-payment-form .wide,
  .finance-business-loan-payment .wide,
  .finance-loan-payment-form .wide,
  .finance-business-payment p,
  .finance-business-payment-form p,
  .finance-business-loan-payment p,
  .finance-loan-payment-form p,
  .finance-business-payment-note {
    grid-column: 1;
  }

  .finance-business-payment .btn,
  .finance-business-payment-form .btn,
  .finance-business-loan-payment .btn,
  .finance-loan-payment-form .btn {
    min-height: 46px;
    width: 100%;
  }

  .finance-business-payment-row,
  .finance-business-loan-payment-row,
  .finance-loan-payment-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 7px;
  }

  .finance-business-payment-row .finance-small,
  .finance-business-loan-payment-row .finance-small,
  .finance-loan-payment-row .finance-small {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .finance-form-actions,
  .finance-row-actions {
    grid-template-columns: 1fr;
  }

  .finance-table td,
  .finance-table tbody tr:nth-child(even) td,
  .finance-opening-row td {
    grid-template-columns: minmax(84px, 0.42fr) minmax(0, 1fr);
  }

  .finance-business-loan-metrics,
  .finance-business-summary,
  .finance-business-metrics,
  .finance-business-loan-totals,
  .finance-loan-totals {
    grid-template-columns: 1fr;
  }

  .finance-business-loan-metrics article.remaining,
  .finance-business-summary article.remaining,
  .finance-business-metrics article.remaining {
    grid-column: 1;
  }
}

/* Bank draft cards stay readable and do not force horizontal scrolling on phones. */
@media (max-width: 700px) {
  .finance-bank-draft-summary-card > header,
  .finance-bank-draft-card > header {
    display: grid;
  }

  .finance-bank-draft-summary-grid,
  .finance-bank-draft-batches {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .finance-bank-draft-summary-card > footer,
  .finance-bank-draft-table-head,
  .finance-bank-draft-notice {
    align-items: flex-start;
    display: grid;
    padding-left: 13px;
    padding-right: 13px;
  }

  .finance-bank-draft-summary-card > footer .finance-link,
  .finance-bank-draft-header-actions,
  .finance-bank-draft-header-actions .finance-small {
    width: 100%;
  }

  .finance-bank-draft-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .finance-bank-draft-header-actions .finance-status {
    justify-self: start;
  }

  .finance-bank-draft-batch > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .finance-bank-draft-batch > header > .finance-status {
    grid-column: 2;
    justify-self: start;
  }

  .finance-bank-draft-table {
    min-width: 0;
  }

  #financeBankDraftRows td:nth-child(1)::before { content: 'Tanggal'; }
  #financeBankDraftRows td:nth-child(2)::before { content: 'Rekening'; }
  #financeBankDraftRows td:nth-child(3)::before { content: 'Keterangan'; }
  #financeBankDraftRows td:nth-child(4)::before { content: 'Uang masuk'; }
  #financeBankDraftRows td:nth-child(5)::before { content: 'Uang keluar'; }
  #financeBankDraftRows td:nth-child(6)::before { content: 'Klasifikasi'; }
  #financeBankDraftRows td:nth-child(7)::before { content: 'Status'; }

  .finance-bank-classification {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .finance-bank-draft-summary-grid,
  .finance-bank-draft-batch-values {
    grid-template-columns: 1fr;
  }
}

/* Lightweight, expandable owner preview for bank posting actions. */
.finance-bank-posting-details{display:grid;gap:9px;padding:14px 18px;border-bottom:1px solid #eadfce;background:#fcfaf6}.finance-bank-posting-details[hidden]{display:none}.finance-bank-posting-personal{display:grid;gap:5px;padding:12px 13px;border:1px solid #e4c890;border-radius:12px;background:#fff8e8;color:#714b1e}.finance-bank-posting-personal b{font-size:9px;letter-spacing:.05em}.finance-bank-posting-personal span{font-size:10px;line-height:1.5}.finance-bank-posting-group{overflow:hidden;border:1px solid #e1d7c9;border-radius:12px;background:#fff}.finance-bank-posting-group.blocker{border-color:#e5b9b3}.finance-bank-posting-group summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;cursor:pointer;color:#4c4035;font-size:11px;font-weight:800;list-style:none}.finance-bank-posting-group summary::-webkit-details-marker{display:none}.finance-bank-posting-group summary:after{content:'+';font-size:17px;line-height:1}.finance-bank-posting-group[open] summary:after{content:'−'}.finance-bank-posting-group summary b{margin-left:auto;color:#79654c;font-size:9px}.finance-bank-posting-group>div{border-top:1px solid #eee5da}.finance-bank-posting-row{display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:start;gap:11px;padding:11px 13px;border-top:1px solid #f0e9df}.finance-bank-posting-row:first-child{border-top:0}.finance-bank-posting-row.personal{background:#fffaf0}.finance-bank-posting-row time{color:#806d56;font-size:9px;font-weight:800}.finance-bank-posting-row>div{display:grid;gap:3px;min-width:0}.finance-bank-posting-row b{overflow-wrap:anywhere;color:#3f352c;font-size:11px}.finance-bank-posting-row small{color:#81766a;font-size:9px}.finance-bank-posting-row p{margin:2px 0 0;color:#6f655b;font-size:9px;line-height:1.45}.finance-bank-posting-row em{color:#8a5819;font-size:8px;font-style:normal;font-weight:900;letter-spacing:.03em}.finance-bank-posting-row>strong{color:#704b1d;font-size:11px;white-space:nowrap}.finance-bank-posting-group>div>footer{padding:9px 13px;background:#f8f4ee;color:#81766a;font-size:9px}

@media (max-width:700px){.finance-bank-posting-details{padding:11px}.finance-bank-posting-group summary{align-items:flex-start}.finance-bank-posting-row{grid-template-columns:1fr auto;gap:7px}.finance-bank-posting-row time{grid-column:1/-1}.finance-bank-posting-row>strong{grid-column:2;grid-row:2}.finance-bank-posting-row>div{grid-column:1;grid-row:2}}

/* Owner-only ending-balance reconciliation: clear on desktop, stacked on phones. */
.finance-balance-reconciliation {
  margin: 18px 0;
  border-left-color: #237452;
}

.finance-balance-reconciliation > header p {
  margin: 5px 0 0;
  color: #7b7064;
  font-size: 11px;
  line-height: 1.45;
}

.finance-balance-safe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid #c8ded2;
  background: #eef8f2;
  color: #216a4d;
}

.finance-balance-safe b {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: .05em;
}

.finance-balance-safe span {
  color: #587366;
  font-size: 11px;
  line-height: 1.45;
}

.finance-balance-summary {
  padding: 12px 13px;
  border: 1px dashed #d8c5a4;
  border-radius: 11px;
  background: #fbf5eb;
  color: #705b43;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.finance-balance-summary.increase { border-color: #b9d8c8; background: #f0f8f4; color: #216a4d; }
.finance-balance-summary.decrease { border-color: #ebc8c2; background: #fff4f2; color: #9b3d36; }
.finance-balance-summary.same { color: #756b60; }

@media (max-width: 700px) {
  .finance-balance-safe {
    align-items: flex-start;
    display: grid;
    padding-left: 13px;
    padding-right: 13px;
  }

  #financeBalanceReconciliationButton {
    min-height: 46px;
    width: 100%;
  }
}

/* Piutang / Kasbon follows the same card-first mobile language as the finance workspace. */
@media (max-width: 1050px) {
  .finance-receivable-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .finance-receivable-notice {
    align-items: flex-start;
    display: grid;
    padding: 13px 14px;
  }

  .finance-receivable-metrics {
    gap: 8px;
  }

  .finance-receivable-metrics article {
    padding: 14px;
  }

  .finance-receivable-metrics strong {
    font-size: 17px;
  }

  .finance-receivable-list {
    gap: 12px;
    padding: 12px;
  }

  .finance-receivable-item > header {
    display: grid;
    padding: 14px;
  }

  .finance-receivable-totals {
    grid-template-columns: 1fr;
  }

  .finance-receivable-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 13px 13px;
  }

  .finance-receivable-actions .finance-small {
    width: 100%;
  }

  .finance-receivable-collection {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 13px;
  }

  .finance-receivable-collection .finance-status,
  .finance-receivable-collection .finance-small {
    grid-column: 1 / -1;
  }

  .finance-receivable-collection .finance-small {
    width: 100%;
  }

  .finance-receivable-activity {
    padding: 4px 13px 12px;
  }

  .finance-receivable-activity-row {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 9px;
  }

  .finance-receivable-activity-row > strong {
    grid-column: 2;
    white-space: normal;
  }

  .finance-payroll-advance-lock {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .finance-receivable-metrics,
  .finance-receivable-actions {
    grid-template-columns: 1fr;
  }
}