/* ============================================================
   Provider Portal — Pricing tab (the standing price menu)
   Mobile-first. Each service is a card holding a title, an
   optional modifier, and a low--high price range. Reuses the
   shared .field label/input styles from portal_profile.css.
   ============================================================ */

/* Page header — matches the Profile tab's rhythm so the tabs read as one set. */
.pi-head { margin-top: var(--ha-space-4); }
.pi-head .portal-eyebrow { margin-top: var(--ha-space-6); }

.pricing .pi-list {
  list-style: none;
  margin: var(--ha-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ha-space-3);
}

/* One service row, as a resting card. */
.pi-row {
  background: var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md);
  box-shadow: var(--ha-shadow-card);
  padding: var(--ha-space-4);
  transition: box-shadow 160ms ease-out, border-color 160ms ease-out;
}
/* The actively-edited service card reads as the focused one (no hover lift —
   these are forms, not links). */
.pi-row:focus-within {
  border-color: var(--ha-blue-accent);
  box-shadow: var(--ha-shadow-sheet);
}

/* Title on the left, a quiet remove control top-right. */
.pi-row-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ha-space-2);
}
.pi-grow { flex: 1; min-width: 0; }

.pi-remove {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  margin-top: 22px; /* drop the X to sit beside the input, not the label */
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ha-ink-muted);
  border-radius: var(--ha-radius-sm);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
/* Expand the tap target to ~48px without growing the visual. */
.pi-remove::before { content: ""; position: absolute; inset: -6px; }
.pi-remove svg { width: 18px; height: 18px; }
.pi-remove:hover { color: var(--ha-danger); background: var(--ha-portal-hover); }
.pi-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ha-blue-accent);
}

/* Low -- High price pair. */
.pi-prices {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--ha-space-2);
  align-items: end;
}
.pi-prices .field { margin-bottom: 0; }
.pi-dash {
  height: 46px;
  display: flex;
  align-items: center;
  color: var(--ha-ink-muted);
  font-size: var(--ha-fs-body-lg);
}

/* Dollar-prefixed money input. */
.pi-input-money { position: relative; display: block; }
.pi-money-sign {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ha-ink-muted);
  font-size: var(--ha-fs-body);
  pointer-events: none;
}
/* Clear the $ prefix. Scoped to [type=number] so it outranks the shared
   `.field input[type="number"]` padding rule from portal_profile.css. */
.pi-money input[type="number"] { padding-left: 28px; }
/* Hide the number-spinner so the $ + value read as money, not a stepper. */
.pi-money input[type="number"]::-webkit-outer-spin-button,
.pi-money input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pi-money input[type="number"] { -moz-appearance: textfield; }

/* Inline validation: red border on the field, message below (text carries the
   meaning, never hue alone). */
.field input.is-invalid { border-color: var(--ha-danger); }
.field input.is-invalid:focus { box-shadow: 0 0 0 2px var(--ha-danger-bg); }
.pi-field-error {
  color: var(--ha-danger);
  font-size: var(--ha-fs-caption);
  margin: 6px 0 0;
}

/* "Add a service": a full-width slot affordance below the list. */
.pi-add {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ha-space-2);
  margin-top: var(--ha-space-3);
  padding: 13px;
  background: var(--ha-surface);
  border: 1px dashed var(--ha-border);
  border-radius: var(--ha-radius-md);
  color: var(--ha-blue-text);
  font: inherit;
  font-size: var(--ha-fs-small);
  font-weight: var(--ha-weight-medium);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.pi-add svg { width: 16px; height: 16px; }
.pi-add:hover { border-color: var(--ha-blue-accent); background: var(--ha-portal-hover); }
.pi-add:focus-visible {
  outline: none;
  border-color: var(--ha-blue-accent);
  box-shadow: var(--ha-portal-focus);
}

.pi-save { margin-top: var(--ha-space-5); }

/* Empty state (most providers' first visit). */
.pi-empty {
  text-align: center;
  padding: var(--ha-space-10) var(--ha-space-4) var(--ha-space-6);
}
.pi-empty svg { width: 40px; height: 40px; color: var(--ha-ink-muted); }
.pi-empty-title {
  font-size: var(--ha-fs-body-lg);
  font-weight: var(--ha-weight-bold);
  margin: var(--ha-space-3) 0 0;
}
.pi-empty-sub {
  font-size: var(--ha-fs-small);
  color: var(--ha-ink-muted);
  margin: 6px auto 0;
  max-width: 34ch;
}
.pi-empty .portal-btn { margin-top: var(--ha-space-4); }