/* =====================================================================
 * ACCOUNTS PAYABLE WORKSPACE
 * =====================================================================
 * Scoped entirely under #apPage / .ap-* so it never leaks into the
 * generic master-file table styling in styles.css. Uses the app's
 * existing theme variables (--bg-*, --text-*, --border*, --red*) so it
 * follows whichever theme the user has selected.
 * ===================================================================== */

.ap-page{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg-app);
  min-height:0;
}

/* ---------------------------- Toolbar ---------------------------- */
.ap-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  background:var(--bg-toolbar);
  border-bottom:1px solid var(--border0);
  flex-shrink:0;
  gap:16px;
}
.ap-toolbar-meta{display:flex;align-items:baseline;gap:8px;font-size:12px;}
.ap-refreshed-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;font-size:10px;}
.ap-refreshed-value{color:var(--text-light);font-weight:600;}
.ap-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ar-report-heading{padding:10px 20px;background:var(--bg-app);border-bottom:1px solid var(--border1);}
.ar-report-heading strong{color:var(--text-light);font-size:14px;}
.ar-report-heading span{color:var(--text-dim);font-size:12px;}
#arPage > .ap-summary{grid-template-columns:repeat(6,minmax(120px,1fr));}
#arPage > .ar-aging-summary{grid-template-columns:repeat(4,minmax(120px,1fr));}
#arPage > .ap-view-switcher{padding-top:2px;}
#arPage{overflow-x:hidden;overflow-y:auto;}
#arPage #arTableWrap{flex:1 0 280px;min-height:280px;}
#arPage .ap-view-panel{min-height:0;}
#arPage .ap-table-scroll{min-height:180px;}
#arPage .ar-open-table{min-width:1450px;}
#arPage .ar-statement-summary{grid-template-columns:repeat(4,minmax(140px,1fr));}
#arPage #arStatementView .ap-table-scroll{padding:0 0 14px;}
#arPage .ar-pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:10px 20px;background:var(--bg-app);border-top:1px solid var(--border1);flex-shrink:0;}
#arPage .ar-pagination .pag-btn:disabled{opacity:.5;cursor:not-allowed;}
#arPage .ap-ledger-table{min-width:2850px;}
#arPage .ap-table thead th[onclick]{cursor:pointer;}
#arPage .ap-table tbody tr.ap-row-clickable{cursor:pointer;}
#arPage .ap-table tbody tr.ap-row-clickable:hover{background:var(--bg-sel);}
#arPage .ar-aging-current{color:#1b6d33;font-weight:600;}
#arPage .ar-aging-1-30-days{color:#8a6300;font-weight:600;}
#arPage .ar-aging-31-60-days,#arPage .ar-aging-61-90-days,#arPage .ar-aging-over-90-days{color:var(--red);font-weight:600;}
.ar-statement-picker-row{display:flex;align-items:center;gap:10px;padding:14px 20px;flex-shrink:0;}
.ar-statement-picker-row label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;}
.ar-statement-picker-row select{background:var(--bg-input);border:1px solid var(--border1);color:var(--text-light);padding:7px 10px;border-radius:4px;font-size:12px;min-width:min(460px,80vw);}

.ap-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:5px;border:1px solid var(--border1);
  background:var(--bg-card);color:var(--text-mid);
  font-size:12px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;transition:all .15s;
}
.ap-btn:hover{background:var(--bg-hover);color:var(--text-light);border-color:var(--border2);}
.ap-btn-icon{font-size:13px;line-height:1;}
.ap-btn-primary{background:var(--red);border-color:var(--red2);color:#fff;}
.ap-btn-primary:hover{background:var(--red2);color:#fff;}
.ap-btn-ghost{background:transparent;}
.ap-btn:disabled{opacity:.55;cursor:not-allowed;}
.ap-btn-busy .ap-btn-icon{display:inline-block;animation:apSpin 0.8s linear infinite;}
@keyframes apSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---------------------------- Summary strip ---------------------------- */
.ap-summary{
  display:grid;
  grid-template-columns:repeat(5, minmax(150px, 1fr));
  gap:10px;
  padding:14px 20px;
  background:var(--bg-app);
  flex-shrink:0;
}
.ap-summary-card{
  background:var(--bg-card);
  border:1px solid var(--border1);
  border-radius:6px;
  padding:10px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.ap-summary-highlight{border-color:var(--red2);box-shadow:0 0 0 1px var(--shadow-red) inset;}
.ap-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim);}
.ap-summary-value{font-size:18px;font-weight:700;color:var(--text-light);font-variant-numeric:tabular-nums;}
.ap-summary-credit{color:#1b6d33;}
.ap-summary-debit{color:var(--red);}

/* ---------------------------- View switcher ---------------------------- */
.ap-view-switcher{
  display:flex;gap:6px;
  padding:0 20px 10px;
  flex-shrink:0;
  border-bottom:1px solid var(--border1);
}
.ap-view-switcher.ap-disabled{opacity:.5;pointer-events:none;}
.ap-view-tab{
  padding:9px 16px;border:1px solid transparent;border-bottom:none;
  background:none;color:var(--text-mid);font-size:12px;font-weight:600;
  cursor:pointer;border-radius:5px 5px 0 0;transition:all .15s;
}
.ap-view-tab:hover{background:var(--bg-hover);color:var(--text-light);}
.ap-view-tab.active{
  background:var(--bg-card);color:var(--red);
  border-color:var(--border1);
  box-shadow:0 -2px 0 var(--red) inset;
}

/* ---------------------------- Filters ---------------------------- */
.ap-filters{
  display:flex;flex-wrap:wrap;align-items:end;gap:12px;
  padding:12px 20px;background:var(--bg-tabs);border-bottom:1px solid var(--border1);
  flex-shrink:0;
}
.ap-filters.ap-disabled{opacity:.5;pointer-events:none;}
.ap-filter-field{display:flex;flex-direction:column;gap:4px;min-width:140px;}
.ap-filter-field label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-dim);}
.ap-filter-field input,.ap-filter-field select{
  background:var(--bg-input);border:1px solid var(--border1);color:var(--text-light);
  padding:7px 9px;border-radius:4px;font-size:12px;min-width:140px;
}
.ap-filter-field input:focus,.ap-filter-field select:focus{outline:none;border-color:var(--red);}
.ap-filter-checkbox{flex-direction:row;align-items:center;gap:6px;min-width:auto;}
.ap-filter-checkbox label{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:none;color:var(--text-mid);cursor:pointer;}
.ap-clear-filters{
  margin-left:auto;padding:8px 14px;border-radius:4px;border:1px solid var(--border1);
  background:transparent;color:var(--text-dim);font-size:11px;font-weight:600;cursor:pointer;
  align-self:flex-end;
}
.ap-clear-filters:hover{color:var(--red);border-color:var(--red2);}

.ap-active-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 20px;background:var(--bg-app);border-bottom:1px solid var(--border1);
  flex-shrink:0;
}
.ap-active-filters-label{font-size:11px;color:var(--text-dim);font-weight:600;}
.ap-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-card);border:1px solid var(--border2);border-radius:12px;
  padding:3px 6px 3px 10px;font-size:11px;color:var(--text-light);
}
.ap-filter-chip-x{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.ap-filter-chip-x:hover{color:var(--red);}

/* ---------------------------- Body / table wrap ---------------------------- */
.ap-view-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.ap-view-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.ap-table-scroll{flex:1;overflow:auto;background:var(--bg-app);}

.ap-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.ap-table thead th{
  position:sticky;top:0;z-index:2;
  background:var(--bg-thead);color:var(--text-thead);
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;
  padding:10px 12px;border-right:1px solid var(--ap-grid-separator);border-bottom:1px solid var(--ap-grid-separator);
  cursor:pointer;white-space:nowrap;user-select:none;
}
.ap-table thead th:hover{color:var(--red);}
.ap-table thead th.ap-num{text-align:right;}
.ap-table tbody td{
  padding:8px 12px;border-right:1px solid var(--border1);border-bottom:1px solid var(--border1);
  color:var(--text-td);white-space:nowrap;
}
.ap-table tbody tr:nth-child(even){background:var(--bg-row-even);}
.ap-table tbody tr:nth-child(odd){background:var(--bg-row-odd);}
.ap-table tbody tr:hover{background:var(--bg-hover);}
.ap-table td.ap-num,.ap-table th.ap-num{text-align:right;font-variant-numeric:tabular-nums;}
.ap-table .ap-remarks-cell{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-positive{color:var(--text-td);}
.ap-negative{color:var(--red);font-weight:600;}

.ap-row-clickable{cursor:pointer;}
.ap-row-selectable{cursor:pointer;}
.ap-row-sel{background:var(--bg-sel) !important;}

.ap-no-match{
  padding:40px 20px;text-align:center;color:var(--text-dim);font-size:13px;
}

/* ---------------------------- Badges ---------------------------- */
.ap-badge{
  display:inline-block;padding:3px 9px;border-radius:11px;font-size:10.5px;
  font-weight:600;white-space:nowrap;border:1px solid transparent;
}
.ap-badge-open{background:#fdf1d6;color:#8a6300;border-color:#e8c96a;}
.ap-badge-settled{background:#e3f6e8;color:#1b6d33;border-color:#8fd6a4;}
.ap-badge-credit{background:#e6eefc;color:#1b4f9c;border-color:#a9c6f2;}
.ap-badge-neutral{background:var(--bg-card);color:var(--text-mid);border-color:var(--border1);}
.ap-badge-source{background:var(--bg-card);color:var(--text-dim);border-color:var(--border1);margin-right:2px;}

/* ---------------------------- States: loading / empty / error ---------------------------- */
.ap-state-panel{flex:1;overflow:auto;}
.ap-state-box{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:60px 20px;text-align:center;color:var(--text-dim);
}
.ap-state-icon{font-size:32px;opacity:.7;}
.ap-state-error .ap-state-icon{color:var(--red);}
.ap-state-error p{color:var(--text-light);font-size:13px;max-width:420px;}

.ap-skeleton-row td{padding:10px 12px;border-bottom:1px solid var(--border1);}
.ap-skeleton-cell{height:14px;border-radius:3px;background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);background-size:200% 100%;animation:apShimmer 1.4s ease-in-out infinite;}
@keyframes apShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.ap-mock-banner{
  display:flex;align-items:center;gap:10px;
  background:#fdf1d6;color:#6b4f00;border-bottom:1px solid #e8c96a;
  padding:9px 20px;font-size:12px;flex-shrink:0;
}
.ap-mock-banner-quiet{background:var(--bg-card);color:var(--text-dim);border-color:var(--border1);}
.ap-mock-banner-icon{font-size:14px;}
.ap-mock-banner-retry{
  margin-left:auto;background:none;border:1px solid currentColor;border-radius:4px;
  padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;color:inherit;
}
.ap-mock-banner-retry:hover{background:rgba(0,0,0,0.06);}

/* ---------------------------- Supplier Statement ---------------------------- */
.ap-statement-picker-row{
  display:flex;align-items:center;gap:10px;padding:14px 20px 0;flex-shrink:0;
}
.ap-statement-picker-row label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;}
.ap-statement-picker-row select{
  background:var(--bg-input);border:1px solid var(--border1);color:var(--text-light);
  padding:7px 10px;border-radius:4px;font-size:12px;min-width:260px;
}
.ap-statement-summary{padding:14px 20px;grid-template-columns:repeat(6, minmax(120px,1fr));}

#apStatementContent{display:flex;flex-direction:column;flex:1;min-height:0;}
#apStatementContent .ap-table-scroll{flex:1;padding:0 20px 20px;}

.ap-ledger-table{min-width:2500px;}
.ap-ledger-table thead th:first-child,
.ap-ledger-table tbody td:first-child{left:auto;}

/* Group-header row (SUPPLIER / DATE / DEBIT / ...): one stronger rule at
   each group edge, without drawing the shared edge twice. */
.ap-ledger-table thead tr:first-child th{
  position:sticky;top:0;z-index:3;text-align:center;height:32px;line-height:32px;
  padding-top:0;padding-bottom:0;box-sizing:border-box;
  border-top:1px solid var(--ap-grid-separator);
  border-right-color:var(--ap-grid-separator);border-bottom-color:var(--ap-grid-separator);
}
.ap-ledger-table thead tr:first-child th[rowspan="2"]{
  border-right-color:var(--ap-grid-separator);
}

/* Column-header row (CODE / SUPPLIER / ENCODED DATE / ...): a faint rule
   between every column, so it doesn't compete with the group divider. */
.ap-ledger-table thead tr:nth-child(2) th{
  position:sticky;top:33px;z-index:3;text-align:center;height:32px;line-height:32px;
  padding-top:0;padding-bottom:0;box-sizing:border-box;
}
/* Last column of each group, in both header rows and the body: a bold rule
   that lines up with the group-header dividers above, so the group
   boundary reads clearly all the way down the table. */
.ap-ledger-table thead tr:nth-child(2) th.ap-col-end{
  border-right-color:var(--ap-grid-separator);
}

.ap-ledger-table tbody td{text-align:center;white-space:nowrap;}
.ap-ledger-table tbody td.ap-num{text-align:right;}


/* ---------------------------- Manual entry form additions ---------------------------- */
.ap-required{color:var(--red);}
.ap-form-error{
  background:#fdeaea;border:1px solid #f0b8b8;color:#8a1f1f;
  border-radius:5px;padding:10px 14px;font-size:12px;margin-bottom:14px;
}

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 1100px){
  .ap-summary{grid-template-columns:repeat(2, 1fr);}
  .ap-statement-summary{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 720px){
  .ap-toolbar{flex-direction:column;align-items:stretch;}
  .ap-toolbar-actions{justify-content:flex-start;}
  .ap-filters{flex-direction:column;align-items:stretch;}
  .ap-clear-filters{align-self:flex-start;margin-left:0;}
  #arPage > .ap-summary,#arPage > .ar-aging-summary,#arPage > .ar-statement-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------------------------- Print ---------------------------- */
@media print{
  .sidebar, .titlebar, .topbar, .ap-toolbar, .ap-filters, .ap-active-filters,
  .ap-view-switcher, .ap-mock-banner, .ap-statement-picker-row{display:none !important;}
}