/* Payment History. Colours come from the CSS variables. Layout uses flexbox and grid only.
   --color-success and --color-warning are aliases of the project's existing success and warning tokens,
   so they follow light and dark mode. */
:root {
  --color-success: var(--success);
  --color-warning: var(--warning);
}

/* Compact overview leaves room for the invoice list. */
#app #view-payment-history { max-width: 1200px; margin-inline: auto; }
#app #view-payment-history .payment-summary-section h2 { margin-top: 14px; }
#app #view-payment-history .payment-summary-card { min-height: 98px; justify-content: flex-start; padding: 16px; gap: 10px; box-shadow: none; }
#app #view-payment-history .payment-summary-card > b { font-size: clamp(18px, 2vw, 24px); white-space: normal; overflow-wrap: anywhere; }
#view-payment-history .payment-breakdown-wrap { overflow-x: auto; margin-top: 20px; }
#view-payment-history .payment-breakdown { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#view-payment-history .payment-breakdown caption { text-align: left; font-size: 14px; font-weight: 650; padding-bottom: 12px; }
#view-payment-history .payment-breakdown caption span { float: right; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
#view-payment-history .payment-breakdown th, #view-payment-history .payment-breakdown td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
#view-payment-history .payment-breakdown th:first-child { text-align: left; }
#view-payment-history .payment-breakdown thead { background: var(--bg-main); color: var(--text-secondary); }
#view-payment-history .payment-breakdown thead th { font-weight: 500; }
#app #view-payment-history .payment-empty { padding: 26px 16px; text-align: center; }
#view-payment-history .payment-empty b, #view-payment-history .payment-empty span { display: block; }
#view-payment-history .payment-empty span { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
#view-payment-history button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 560px) {
  #app #view-payment-history .payment-summary-cards { grid-template-columns: 1fr 1fr; }
  #app #view-payment-history .payment-summary-card.revenue { grid-column: 1 / -1; min-height: 0; }
  #app #view-payment-history .payment-summary-card { padding: 12px; min-height: 86px; }
  #view-payment-history .payment-breakdown th, #view-payment-history .payment-breakdown td { padding: 9px 6px; font-size: 12px; }
  #view-payment-history .payment-breakdown caption span { float: none; display: block; margin-top: 4px; }
}

#view-payment-history {
  background: var(--bg-main);
  color: var(--text-primary);
  padding: 8px 16px 32px;
}
#view-payment-history .project-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
#view-payment-history .project-header .hint { margin-top: 4px; color: var(--text-secondary); font-size: 14px; line-height: 1.45; }

/* Analytics card: white surface with a soft drop shadow. */
#view-payment-history .admin-block {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(12, 13, 14, .07);
  border: 0;
}
#view-payment-history .payment-summary-period {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
#view-payment-history .payment-summary-section h2 { margin: 20px 0 10px; font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* Three equal micro-cards per section. Labels sit at the top, values at the bottom. */
#view-payment-history .payment-summary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#view-payment-history .payment-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 108px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(12, 13, 14, .06);
}
#view-payment-history .payment-summary-card > span { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
#view-payment-history .payment-summary-card > b {
  font-size: clamp(12px, 3.3vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}
#view-payment-history .payment-summary-card > small { font-size: 12px; color: var(--text-secondary); }
#view-payment-history .payment-summary-card.received > b { color: var(--color-success); }
#view-payment-history .payment-summary-card.pending > b { color: var(--color-warning); }

/* Actions: Export CSV outline button and the filter icon, pushed to the right. */
#view-payment-history .reimbursement-totals-header { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
#view-payment-history #payment-history-export {
  height: 40px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
#view-payment-history .reimbursement-filter-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Table: five columns, with a status pill that opens the edit row. */
#view-payment-history .task-table-wrap { margin-top: 16px; border-top: 1px solid var(--color-border); }
#view-payment-history .payment-history-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
#view-payment-history .payment-history-table th {
  padding: 10px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--color-border);
}
#view-payment-history .payment-history-table td {
  padding: 12px 8px;
  vertical-align: top;
  color: var(--text-primary);
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: break-word;
  word-break: normal;
}
#view-payment-history .payment-history-table td small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
#view-payment-history .payment-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-payment-history .payment-history-table th:last-child,
#view-payment-history .payment-history-table td:last-child { text-align: right; }

/* Status pill: subtle tint with clear coloured text. */
#view-payment-history .payment-status-pill {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#view-payment-history .payment-status-pill.is-paid { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
#view-payment-history .payment-status-pill.is-pending { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
#view-payment-history .payment-status-pill.is-unpaid { background: color-mix(in srgb, var(--text-secondary) 14%, transparent); color: var(--text-secondary); }
#view-payment-history .payment-status-pill:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; }

/* Detail row: the existing edit controls, shown when the pill is tapped. */
#view-payment-history .payment-detail-row.hidden { display: none; }
#view-payment-history .payment-detail-row td { background: var(--bg-main); padding: 12px; }
#view-payment-history .payment-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#view-payment-history .payment-detail-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
#view-payment-history .payment-detail-grid select,
#view-payment-history .payment-detail-grid input { width: 100%; min-width: 0; min-height: 40px; font-size: 14px; }
#view-payment-history .payment-detail-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }

@media (max-width: 560px) {
  #view-payment-history .payment-detail-grid { grid-template-columns: 1fr; }
  #view-payment-history .payment-history-table th,
  #view-payment-history .payment-history-table td { padding-left: 6px; padding-right: 6px; }
}

/* The app's mobile theme stacks .attn-table cells as blocks. Keep this table as a real table on phones,
   so each invoice reads as one row: Date, Invoice #, Client, Amount, Status. */
#view-payment-history .attn-table,
#view-payment-history .attn-table tbody { display: table-row-group; width: 100%; }
#view-payment-history .attn-table { display: table; table-layout: auto; }
#view-payment-history .attn-table tr { display: table-row; }
#view-payment-history .attn-table td,
#view-payment-history .attn-table th { display: table-cell; width: auto; }
#view-payment-history .attn-table td[colspan] { display: table-cell; padding: 12px; }

/* Column proportions for the five-column invoice list. */
#view-payment-history .payment-history-table th:nth-child(1),
#view-payment-history .payment-history-table td.payment-date { width: 15%; }
#view-payment-history .payment-history-table th:nth-child(2) { width: 23%; }
#view-payment-history .payment-history-table th:nth-child(3) { width: 25%; }
#view-payment-history .payment-history-table th:nth-child(4) { width: 15%; text-align: right; }
#view-payment-history .payment-history-table th:nth-child(5) { width: 22%; text-align: right; }
@media (max-width: 560px) {
  #view-payment-history .payment-history-table { font-size: 13px; }
  #view-payment-history .payment-history-table th,
  #view-payment-history .payment-history-table td { padding-left: 4px; padding-right: 4px; }
  #view-payment-history .payment-history-table td small { font-size: 11px; }
  #view-payment-history .payment-status-pill { padding: 3px 7px; font-size: 11px; }
}
@media (max-width: 380px) {
  #view-payment-history .payment-history-table th:nth-child(1),
  #view-payment-history .payment-history-table td.payment-date { width: 14%; }
  #view-payment-history .payment-history-table th:nth-child(2) { width: 22%; }
  #view-payment-history .payment-history-table th:nth-child(3) { width: 23%; }
  #view-payment-history .payment-history-table th:nth-child(4) { width: 16%; }
  #view-payment-history .payment-history-table th:nth-child(5) { width: 25%; }
  #view-payment-history .payment-status-pill { padding: 3px 6px; font-size: 10.5px; }
}
@media (max-width: 380px) {
  #view-payment-history .payment-history-table th:last-child,
  #view-payment-history .payment-history-table td:last-child { padding-right: 2px; }
  #view-payment-history .payment-status-pill { padding: 3px 5px; }
}
@media (max-width: 560px) {
  #view-payment-history { padding: 8px 12px 28px; }
  #view-payment-history .admin-block { padding: 12px; }
}

/* Use the shared WorkBeat palette rather than the dashboard-specific colours. */
#app #view-payment-history{--bg-main:var(--bg);--bg-card:var(--surface);--text-primary:var(--ink);--text-secondary:var(--muted);--color-border:var(--line);background:var(--bg);color:var(--ink)}
#app #view-payment-history .admin-block,#app #view-payment-history .payment-summary-card{background:var(--surface);border:1px solid var(--line);box-shadow:none}

.manual-invoice-dialog { box-sizing:border-box; width:min(740px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:24px; border:1px solid var(--color-border); border-radius:16px; background:var(--bg-card); color:var(--text-primary); overflow:auto; }
.manual-invoice-dialog::backdrop { background:rgba(0,0,0,.6); }
.manual-invoice-dialog header,.manual-invoice-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.manual-invoice-dialog h2 { margin:0; }
.manual-invoice-dialog footer { justify-content:flex-end; margin-top:20px; }
.manual-invoice-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.manual-invoice-dialog label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:13px; }
.manual-invoice-dialog input,.manual-invoice-dialog select,.manual-invoice-dialog textarea { box-sizing:border-box; width:100%; min-height:42px; padding:9px 10px; border:1px solid var(--color-border); border-radius:8px; background:var(--bg-main); color:var(--text-primary); font:inherit; }
.manual-invoice-wide { grid-column:1/-1; }
.manual-invoice-items { margin-top:20px; border-block:1px solid var(--color-border); padding:14px 0; }
.manual-invoice-items summary { cursor:pointer; margin-bottom:12px; font-weight:600; }
.manual-invoice-line { display:grid; grid-template-columns:2fr 1fr 1fr auto; align-items:end; gap:10px; margin-bottom:14px; }
.manual-invoice-items > button { margin-right:8px; }
@media(max-width:560px) { .manual-invoice-dialog { padding:18px; } .manual-invoice-grid { grid-template-columns:1fr; } .manual-invoice-line { grid-template-columns:1fr 1fr; } .manual-invoice-line label:first-child { grid-column:1/-1; } }
.manual-invoice-file { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; } .manual-invoice-file a { display:flex; align-items:center; gap:10px; overflow-wrap:anywhere; } .manual-invoice-file img { width:76px; height:76px; object-fit:contain; border-radius:6px; }

.manual-invoice-dialog { width:min(540px,calc(100vw - 24px)); padding:18px; border-radius:12px; }
.manual-invoice-dialog h2 { font-size:18px; }
.manual-invoice-dialog .manual-invoice-grid { gap:12px; margin-top:14px; }
.manual-invoice-dialog input,.manual-invoice-dialog select { min-height:36px; padding:7px 9px; }
.manual-invoice-options { padding:12px 0; border-bottom:1px solid var(--color-border); }
.manual-invoice-options summary { cursor:pointer; font-size:13px; font-weight:600; }