/* ═══ STUDIOHAUS PORTAL — Photographer pay ═══
   Monochrome: core.css tokens only. Radii 8 / 12 / 16. */

.pay { max-width: 1080px; }

.pay-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pay-title {
  margin: 0;
  font-size: var(--fs-2xl, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.pay-subtitle { margin-top: 6px; font-size: var(--fs-sm, 13px); color: var(--text-40); }
.pay-h2 {
  margin: 0 0 12px;
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-45);
}

.pay-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-month {
  display: flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-input);
  overflow: hidden;
}
.pay-step {
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-60);
  font-size: 16px;
  cursor: pointer;
}
.pay-step:hover { color: var(--text); background: var(--bg-card-hover); }
.pay-month-input {
  height: 100%;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm, 13px);
  padding: 0 10px;
  color-scheme: dark;
}
[data-theme="light"] .pay-month-input { color-scheme: light; }
.pay-month-input:focus { outline: none; background: var(--bg-card-hover); }

/* Summary cards */
.pay-summary, .pay-my-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.pay-my-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.pay-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg-card);
}
.pay-card-label {
  font-size: var(--fs-xs, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-45);
}
.pay-card-val {
  margin-top: 6px;
  font-size: var(--fs-xl, 22px);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Photographer group */
.pay-group {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-card);
  overflow: hidden;
}
.pay-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pay-name { font-size: var(--fs-md, 15px); font-weight: 600; color: var(--text); }
.pay-sub {
  margin-top: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--fs-sm, 13px);
  color: var(--text-45);
}
.pay-group-totals { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pay-tot { display: flex; flex-direction: column; align-items: flex-end; }
.pay-tot-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-40);
}
.pay-tot-val { font-size: var(--fs-base, 14px); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-note {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm, 13px);
  color: var(--status-warning);
}
.pay-muted { color: var(--text-45); }

/* Table */
.pay-table-wrap { overflow-x: auto; }
.pay-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 13px); }
.pay-table th {
  text-align: left;
  padding: 10px 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-40);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pay-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-60);
  vertical-align: middle;
}
.pay-table tr:last-child td { border-bottom: 0; }
.pay-table tbody tr:hover td { background: var(--bg-card-hover); }
.pay-c-date { white-space: nowrap; }
.pay-c-shoot { min-width: 200px; }
.pay-shoot-title { color: var(--text); font-weight: 500; }
.pay-shoot-addr { margin-top: 2px; font-size: var(--fs-xs, 11px); color: var(--text-45); }
.pay-c-type { white-space: nowrap; text-transform: capitalize; }
.pay-bk-status { display: block; margin-top: 2px; font-size: var(--fs-xs, 11px); color: var(--text-40); }
.pay-c-amt { text-align: right; white-space: nowrap; }
.pay-table th.pay-c-amt { text-align: right; }
.pay-c-act { text-align: right; white-space: nowrap; }
.pay-table tr.is-paid .pay-shoot-title { color: var(--text-60); }

/* Inline values and edit */
.pay-amt, .pay-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.pay-rate { margin: 0; padding: 2px 8px; color: var(--text-60); }
.pay-amt:hover, .pay-rate:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.pay-amt-val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.pay-amt-src { font-size: var(--fs-xs, 11px); color: var(--text-40); }
.pay-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pay-input {
  width: 110px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm, 13px);
  font-variant-numeric: tabular-nums;
}
.pay-input--notes { width: 180px; }
.pay-input:focus { outline: none; border-color: var(--focus); }

.pay-pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  font-size: var(--fs-xs, 11px);
  color: var(--text-60);
  white-space: nowrap;
}
.pay-pill--paid {
  border-color: rgba(var(--status-positive-rgb), 0.35);
  color: var(--status-positive);
}

.pay-loading, .pay-error {
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg-card);
  font-size: var(--fs-sm, 13px);
  color: var(--text-45);
}
.pay-error { color: var(--status-negative); }

/* Default rates */
.pay-rates { margin-top: 32px; }
.pay-rates-list {
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg-card);
}
.pay-rates-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pay-rates-row:last-child { border-bottom: 0; }

/* Calendar booking panel */
.pay-panel .pay-edit { margin-top: 4px; }
.pay-panel-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Contractor: My pay */
.pay-my { margin-top: 28px; max-width: 720px; }
.pay-my .pay-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg-card);
}
.pay-my-empty { font-size: var(--fs-sm, 13px); }

@media (max-width: 720px) {
  .pay-title { font-size: var(--fs-xl, 22px); }
  .pay-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pay-card { padding: 12px; }
  .pay-card-val { font-size: var(--fs-md, 15px); }
  .pay-group-head { padding: 14px 16px; }
  .pay-group-totals { gap: 14px; }
  .pay-tot { align-items: flex-start; }
  .pay-table th, .pay-table td { padding: 10px 12px; }
  .pay-c-type { display: none; }
}

/* Rate cards (contractors.rate_card): pay by the services on the shoot */
.pay-card-line { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-45); }
.pay-rates-help { margin: -4px 0 12px; font-size: var(--fs-xs); }
.pay-interiors { font-size: var(--fs-xs); margin: 4px 0; }
.person-rate-card { display: grid; gap: 6px; }
.person-rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 12px; }
.person-rate-label { font-size: var(--fs-sm); color: var(--text-60); }
.person-rate-help { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-45); line-height: 1.4; }
@media (max-width: 480px) { .person-rate-row { grid-template-columns: minmax(0, 1fr) 110px; } }
.pay-c-amt .pay-amt-src { margin-left: 6px; }

/* Phones: My pay rows as two line cards (shoot and amount, then date and
   status) instead of a table that runs off the side */
@media (max-width: 768px) {
  .pay-my .pay-table-wrap { overflow: visible; }
  .pay-my .pay-table, .pay-my .pay-table tbody { display: block; }
  .pay-my .pay-table thead { display: none; }
  .pay-my .pay-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "shoot amt" "date status";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .pay-my .pay-table tr:last-child { border-bottom: 0; }
  .pay-my .pay-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .pay-my .pay-table tbody tr:hover td { background: none; }
  .pay-my .pay-c-shoot { grid-area: shoot; min-width: 0; overflow-wrap: anywhere; }
  .pay-my .pay-c-amt { grid-area: amt; }
  .pay-my .pay-c-date { grid-area: date; font-size: var(--fs-xs); color: var(--text-45); }
  .pay-my .pay-table td:nth-child(4) { grid-area: status; justify-self: end; }
}