/* Canonical Driver Pay — one centered, page-safe payment confirmation.
   Color roles: blue=current facts, gold=cash evidence, purple=rollover,
   green=settled. The modal owns one vertical scroll surface on mobile. */
.weekly-driver-payment-modal {
  border: 1px solid color-mix(in srgb, var(--info) 58%, var(--border));
}

.weekly-driver-payment-heading,
.weekly-driver-payment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weekly-driver-payment-heading small {
  color: var(--info);
  font-weight: 800;
  letter-spacing: .12em;
}

.weekly-driver-payment-heading h2 { margin: 4px 0 0; }
.weekly-driver-payment-heading > span {
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.weekly-driver-payment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.weekly-driver-payment-summary > div {
  background: color-mix(in srgb, var(--info) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border));
  border-radius: 10px;
  min-width: 0;
  padding: 10px;
}

.weekly-driver-payment-summary small,
.weekly-driver-payment-summary strong { display: block; }
.weekly-driver-payment-summary small { color: var(--muted-foreground); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.weekly-driver-payment-summary strong { margin-top: 4px; overflow-wrap: anywhere; }
.weekly-driver-payment-summary .is-purple { border-color: #9333ea; background: rgb(147 51 234 / .1); }
.weekly-driver-payment-summary .is-green { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--card)); }

.weekly-driver-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.weekly-driver-payment-file {
  border: 1px dashed var(--warning);
  border-radius: 10px;
  padding: 12px;
}
.weekly-driver-payment-file b { color: var(--warning); }
.weekly-driver-payment-file small { color: var(--muted-foreground); display: block; margin-top: 6px; }
.weekly-driver-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.weekly-driver-payment-file.is-payment { border-color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--card)); }
.weekly-driver-payment-file.is-settlement { border-color: #9333ea; background: rgb(147 51 234 / .07); }
.weekly-driver-payment-file.is-settlement em { color: #a855f7; }
.weekly-driver-payment-actions { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }

@media (max-width: 640px) {
  .weekly-driver-payment-modal { max-height: calc(100dvh - 12px) !important; width: calc(100vw - 12px) !important; }
  .weekly-driver-payment-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-driver-payment-grid { grid-template-columns: 1fr; }
  .weekly-driver-evidence-grid { grid-template-columns: 1fr; }
  .weekly-driver-payment-actions { align-items: stretch; flex-direction: column-reverse; }
  .weekly-driver-payment-actions .btn { min-height: 46px; width: 100%; }
}

.weekly-driver-payment-amount { font-size: 18px; font-variant-numeric: tabular-nums; }
.weekly-driver-payment-file input { max-width: 100%; }

/* The room's body-level floating control must not cover payment fields. */
body:has(.weekly-driver-payment-modal[role="dialog"]) .room-return-button { display: none; }
/*$vite$:1*/