/* Billing feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout live in theme.css. */

/* Billing: summary cards row — stacks below --bp-narrow (720px) */
.summary-row {
 display: grid;
 gap: var(--space-4);
 grid-template-columns: 1fr;
 margin-top: var(--space-4);
}

@media (min-width: 720px) {
 .summary-row {
  grid-template-columns: repeat(
   3,
   minmax(0, 1fr)
  );
 }
}

/* Money-in-flight banner appended under the three summary cards when a
 * schedule row is 'processing' (bank debit submitted, not yet settled).
 * Spans the full width of the grid so it sits neatly under the cards on
 * both narrow and wide layouts. */
.summary-row > .message {
 grid-column: 1 / -1;
}

.processing-charge-banner {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
 min-width: 0;
}

.summary-card {
 padding: var(--space-4) 0;
 gap: var(--space-3);
}

.summary-card-body {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.summary-card-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: var(--radius-sm);
 background: var(--muted);
 color: var(--muted-foreground);
}

.summary-card-icon.tone-violet {
 background: color-mix(
  in srgb,
  var(--tone-violet) 12%,
  transparent
 );
 color: var(--tone-violet);
}

.summary-card-icon.tone-green {
 background: color-mix(
  in srgb,
  var(--tone-positive) 12%,
  transparent
 );
 color: var(--tone-positive);
}

.summary-card-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.summary-card-value {
 font-size: 20px;
 font-weight: 700;
 line-height: var(--leading-tight);
}

/* Billing: "Powered by Stripe" footer — pinned to the bottom of .page via
 * margin-top:auto inside the page's flex column. */
.stripe-footer {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-4);
 margin-top: auto;
 padding-top: var(--space-5);
 border-top: 1px solid var(--border);
 color: var(--muted-foreground);
 font-size: 13px;
}

.stripe-footer-powered {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
}

.stripe-wordmark {
 display: inline-flex;
 align-items: center;
}

.stripe-wordmark svg {
 height: 16px;
 width: auto;
}

.stripe-footer-sep {
 width: 1px;
 height: 14px;
 background: var(--border);
}

.stripe-footer-link {
 color: var(--muted-foreground);
 text-decoration: none;
}

.stripe-footer-link:hover,
.stripe-footer-link:focus-visible {
 color: var(--foreground);
 text-decoration: underline;
}
/* Payment Methods tab cleanup — fixes the saved-method
 * rows that previously inherited .card's column layout (details + actions
 * stacked and centered) and tidies the section header + add-method footer. */

.pm-list-header {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 margin: var(--space-1) 0 var(--space-3);
}

.pm-list-title {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.pm-list-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 var(--space-2);
 border-radius: var(--radius-pill);
 background: var(--muted);
 color: var(--muted-foreground);
 font-size: 11px;
 font-weight: 600;
}

.pm-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

/* One saved method: brand/bank icon + name/detail on the left, actions
 * pinned right, everything vertically centered on a single line. */
.pm-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-4);
 padding: var(--space-4) var(--space-4);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
}

/* Default method gets a subtle accent so it reads at a glance. */
.pm-row.is-pending {
 border-style: dashed;
}

.pm-linked-note {
 margin: 0;
 font-size: 13px;
 color: var(--muted-foreground);
 line-height: var(--leading-normal);
}

.pm-linked-followup {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-2);
}

.pm-row.is-default {
 border-color: color-mix(
  in srgb,
  var(--primary) 40%,
  var(--border)
 );
 box-shadow: inset 3px 0 0 0
  var(--primary);
}

.pm-row-main {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 min-width: 0;
}

.pm-row-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 flex-shrink: 0;
 border-radius: var(--radius-sm);
 background: var(--muted);
 color: var(--muted-foreground);
}

.pm-row-info {
 min-width: 0;
}

.pm-row-name {
 font-weight: 600;
 font-size: 14px;
 line-height: var(--leading-tight);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.pm-row-sub {
 font-size: 12px;
 color: var(--muted-foreground);
 line-height: var(--leading-tight);
}

.pm-row-actions {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 flex-shrink: 0;
}

/* Contracts table: the contract name is
 * the click-through into detail; it is
 * styled like the app's inline links
 * (primary color, underline on hover)
 * so it clearly reads as clickable. A
 * muted chevron at the row end repeats
 * the affordance. */
.contract-open {
 padding: 0;
 border: 0;
 background: none;
 font: inherit;
 font-weight: 500;
 color: var(--primary);
 text-align: left;
 cursor: pointer;
}

.contract-open:hover,
.contract-open:focus-visible {
 text-decoration: underline;
 text-underline-offset: 3px;
}

.contract-open-chevron {
 display: inline-flex;
 align-items: center;
 padding: 2px;
 border: 0;
 background: none;
 color: var(--muted-foreground);
 cursor: pointer;
}

.contract-open-chevron:hover,
.contract-open-chevron:focus-visible {
 color: inherit;
}

/* Contract detail: back control, title
 * row, then stacked cards. */
.contract-detail-head {
 margin-bottom: var(--space-3);
}

.contract-detail-head .btn-content {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
}

.contract-detail-title {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 flex-wrap: wrap;
 margin-bottom: var(--space-4);
}

.contract-detail-title h2 {
 margin: 0;
 font-size: 20px;
}

.contract-detail-body {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}

.contract-detail-rows {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

.contract-detail-row {
 display: grid;
 grid-template-columns: 10rem 1fr;
 column-gap: var(--space-4);
}

.contract-detail-label {
 font-size: 13px;
}

/* Payment method card rows: label on
 * the left, editable value on the
 * right. */
.pm-assign-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--space-4);
 padding: var(--space-2) 0;
}

.pm-assign-row + .pm-assign-row {
 border-top: 1px solid var(--border);
}

.pm-assign-name {
 min-width: 0;
 overflow-wrap: anywhere;
}

.pm-assign-actions {
 display: flex;
 align-items: flex-start;
 justify-content: flex-end;
 flex-wrap: wrap;
 gap: var(--space-2);
 min-width: 0;
}

.pm-assign-subhead {
 margin-top: var(--space-3);
 padding-top: var(--space-3);
 border-top: 1px solid var(--border);
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

@media (max-width: 520px) {
 .contract-detail-row {
  grid-template-columns: 1fr;
  row-gap: 2px;
 }
}

/* Editable payment-method value: the
 * value itself opens the assign
 * dialog. Long labels wrap to a
 * second line instead of widening the
 * column. The pencil stays visible at
 * low opacity (so touch users get the
 * affordance too) and brightens on
 * hover/focus. */
.contract-pm-edit {
 display: inline-flex;
 align-items: flex-start;
 gap: var(--space-2);
 padding: 0;
 border: 0;
 background: none;
 font: inherit;
 color: inherit;
 text-align: left;
 cursor: pointer;
}

.contract-pm-text {
 max-width: 18ch;
 overflow-wrap: anywhere;
}

.contract-pm-edit svg {
 flex-shrink: 0;
 margin-top: 2px;
 opacity: 0.35;
 transition: opacity 0.15s ease;
}

.contract-pm-edit:hover svg,
.contract-pm-edit:focus-visible svg {
 opacity: 1;
}

.contract-pm-edit:hover
 .contract-pm-text,
.contract-pm-edit:focus-visible
 .contract-pm-text {
 text-decoration: underline dotted;
 text-underline-offset: 3px;
}

/* Add-method footer: helper text + outlined action, separated by a divider. */
.pm-add-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 flex-wrap: wrap;
 margin-top: var(--space-4);
 padding-top: var(--space-4);
 border-top: 1px solid var(--border);
}

.pm-add-hint {
 font-size: 13px;
 color: var(--muted-foreground);
}

.pm-pick-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 margin-top: var(--space-3);
}

.pm-pick-row {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-3) var(--space-4);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 cursor: pointer;
}

.pm-pick-row.is-selected {
 border-color: color-mix(
  in srgb,
  var(--primary) 40%,
  var(--border)
 );
}

.pm-pick-row input {
 margin: 0;
 flex-shrink: 0;
}

.pm-add-bar .btn-content {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
}

@media (max-width: 520px) {
 .pm-row {
  flex-direction: column;
  align-items: stretch;
 }

 .pm-row-actions {
  justify-content: flex-end;
 }
}