/* PC Scientist admin - modal form layout + Edit client polish */

/* ---------- Modals sit above the top bar and dock ---------- */
/* .pcs-modal is rendered inside main.pcs-canvas (z-index 1), which traps it under the top bar. */
.pcs-app .pcs-canvas:has(> .pcs-modal),
.pcs-app .pcs-canvas:has(.pcs-modal > .pcs-modal__card) {
  z-index: 1200;
}

/* ---------- Base form system (zero specificity: page rules still win) ---------- */
:where(.pcs-app) :where(.pcs-form) {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

:where(.pcs-app) :where(.pcs-form__grid) {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

:where(.pcs-app) :where(.pcs-form__actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* ---------- Stock pages (New product, product detail, orders) ---------- */
.pcs-app .pcs-stock-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.pcs-app .pcs-stock-panel > .pcs-panel__title {
  margin: 0;
}

.pcs-app .pcs-stock-panel > p {
  margin: 0;
}

.pcs-app .pcs-stock-page .pcs-form__field > span:first-child {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #4d5f75;
}

.pcs-app .pcs-stock-inline-action {
  display: flex;
  justify-content: flex-start;
  margin-top: -0.35rem;
}

.pcs-app .pcs-stock-inline-action .pcs-btn {
  width: auto;
  min-height: 2.5rem;
}

.pcs-app .pcs-page__actions.pcs-stock-form-actions {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0.6rem;
  height: auto !important;
}

.pcs-app .pcs-page__actions.pcs-stock-form-actions > .pcs-btn {
  flex: 1 1 0 !important;
  min-width: 0;
  height: auto !important;
  min-height: 2.875rem;
}

/* ---------- List filter toolbars (Callbacks, Leads, etc.) ---------- */
/* Action buttons were wider than their shrinking row and slid over the search box. */
.pcs-app .pcs-list-panel__bar {
  flex-wrap: wrap;
  row-gap: 0.6rem;
}

.pcs-app .pcs-list-panel__bar > .pcs-list-panel__row {
  flex-shrink: 0;
  max-width: 100%;
}

.pcs-app .pcs-list-panel__bar > .pcs-filter {
  min-width: min(100%, 14rem);
}

.pcs-app .pcs-list-panel__toolbar:has(> .pcs-filter__select-wrap) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.6rem;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.pcs-app .pcs-list-panel__toolbar > .pcs-filter__select-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
}

.pcs-app .pcs-list-panel__toolbar > .pcs-filter__select-wrap > .pcs-filter__select-label {
  position: static;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #4d5f75;
  white-space: nowrap;
}

.pcs-app .pcs-list-panel__toolbar > .pcs-filter__select-wrap > .pcs-filter__select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  border: 1px solid #cdc9cd !important;
  border-radius: 0.625rem;
  font-size: 0.9375rem !important;
  text-overflow: ellipsis;
}

.pcs-app .pcs-list-panel__toolbar > .pcs-filter__select-wrap > .pcs-filter__select:focus {
  border-color: #6b6ce0 !important;
  outline: 2px solid #6b6ce0;
  outline-offset: 1px;
}

/* ---------- Form controls everywhere: text never touches the box edge ---------- */
.pcs-app .pcs-form__control {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.pcs-app select.pcs-form__control {
  padding-right: 2.2rem;
}

.pcs-app .pcs-canvas :is(input, select, textarea).p-2 {
  padding: 0.5rem 0.75rem !important;
}

/* One field style: textareas and selects match text inputs (live had 2px navy on these only) */
.pcs-app .pcs-form :is(select, textarea):not([disabled]):not(.pcs-form__control--readonly) {
  border: 1px solid #cdc9cd !important;
}

.pcs-app .pcs-form :is(select, textarea):not([disabled]):focus {
  border-color: #6b6ce0 !important;
  outline: 2px solid #6b6ce0;
  outline-offset: 1px;
}

/* Wizard pages (callback, invoice, quote): even spacing and Swiss micro-labels */
.pcs-app .pcs-callback-wizard__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .pcs-app .pcs-callback-wizard__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pcs-app .pcs-callback-wizard__fields > .pcs-form__field:has(textarea),
  .pcs-app .pcs-callback-wizard__fields > :not(.pcs-form__field) {
    grid-column: 1 / -1;
  }
}

.pcs-app .pcs-invoice-wizard .pcs-form__field > span:first-child {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #4d5f75;
}

/* ---------- Shared modal form layout (restores .pcs-form system) ---------- */
.pcs-modal__card > .pcs-modal__content:has(> form.pcs-form) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

:is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form,
.pcs-modal__card > .pcs-modal__body > form.pcs-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  min-height: 0;
}

:is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form {
  flex: 1 1 auto;
  padding: 1.1rem 1.15rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
}

@media (min-width: 560px) {
  :is(.pcs-app, body) .pcs-modal__card .pcs-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.pcs-app, body) .pcs-modal__card .pcs-form__grid > .pcs-form__field--span2 {
    grid-column: 1 / -1;
  }
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form__field > span:first-child {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d5f75;
  line-height: 1.2;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form .pcs-form__control,
:is(.pcs-app, body) .pcs-modal__card .pcs-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:is(.pcs-app, body) .pcs-modal__card .pcs-form select,
:is(.pcs-app, body) .pcs-modal__card .pcs-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.875rem !important;
  padding: 0.65rem 0.8rem !important;
  border: 1px solid #cdc9cd !important;
  border-radius: 0.625rem !important;
  background-color: #fff !important;
  color: #122241 !important;
  font: inherit;
  font-size: 1rem !important;
  line-height: 1.35;
  box-shadow: none !important;
  transition: border-color 0.15s, background-color 0.15s;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 2.4rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.8rem center !important;
  background-size: 1rem !important;
  cursor: pointer;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form textarea {
  min-height: 5.5rem !important;
  resize: vertical;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form input:hover,
:is(.pcs-app, body) .pcs-modal__card .pcs-form select:hover,
:is(.pcs-app, body) .pcs-modal__card .pcs-form textarea:hover {
  border-color: #8494a7 !important;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form input:focus,
:is(.pcs-app, body) .pcs-modal__card .pcs-form select:focus,
:is(.pcs-app, body) .pcs-modal__card .pcs-form textarea:focus {
  outline: 2px solid #6b6ce0 !important;
  outline-offset: 1px !important;
  border-color: #6b6ce0 !important;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form ::placeholder {
  color: #8494a7 !important;
  opacity: 1;
}

:is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form > .pcs-form__actions,
:is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form > .pcs-modal__foot,
:is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form > .pcs-modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem -1.15rem 0;
  padding: 0.85rem 1.15rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #cdc9cd;
  background: #fff;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form__actions .pcs-btn {
  min-height: 2.75rem;
  margin: 0;
}

@media (max-width: 479px) {
  :is(.pcs-modal__card, .pcs-modal__card > .pcs-modal__content) > form.pcs-form > .pcs-form__actions .pcs-btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

.pcs-modal__card .pcs-form__section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.875rem;
  background: #fbfbfd;
}

.pcs-modal__card .pcs-form__section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #6b6ce0;
}

.pcs-modal__card .pcs-form__section-title::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #6b6ce0;
}

.pcs-modal__card .pcs-form > div:has(> .pcs-pricing-grid) {
  padding: 0.9rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.875rem;
  background: #fbfbfd;
}

.pcs-modal__card .pcs-form > div:has(> .pcs-pricing-grid) > .pcs-info-box__title {
  margin: 0 0 0.8rem !important;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6ce0;
}

.pcs-modal__card .pcs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 0.9rem;
}

.pcs-modal__card .pcs-pricing-grid__cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}

.pcs-modal__card .pcs-pricing-grid__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d5f75;
}

.pcs-modal__card .pcs-pricing-grid__cell--total {
  align-items: flex-end;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.625rem;
  background: #122241;
}

.pcs-modal__card .pcs-pricing-grid__cell--total .pcs-pricing-grid__label {
  color: #cdc9cd;
}

.pcs-modal__card .pcs-pricing-grid__value {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
}

/* Picker cards (Assign technicians and similar) */
.pcs-modal__card .pcs-form > div > .pcs-info-box__title,
.pcs-modal__card .pcs-form .pcs-info-box > .pcs-info-box__title {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6ce0;
}

.pcs-modal__card .pcs-info-box > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.pcs-modal__card .pcs-info-box > ul > li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  border: 1px solid #cdc9cd;
  border-radius: 999px;
  background: #fff;
  font-size: 0.875rem;
}

.pcs-modal__card .pcs-info-box > ul > li .pcs-btn {
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.pcs-modal__card .pcs-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.7rem;
  min-width: 0;
}

.pcs-modal__card .pcs-picker-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #cdc9cd;
  border-radius: 0.875rem;
  background: #fff;
  color: #122241;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.pcs-modal__card .pcs-picker-card:hover {
  border-color: #8494a7;
}

.pcs-modal__card .pcs-picker-card:focus-visible {
  outline: 2px solid #6b6ce0;
  outline-offset: 2px;
}

.pcs-modal__card .pcs-picker-card.is-selected {
  border-color: #6b6ce0;
  background: #f4f4fd;
  box-shadow: inset 0 0 0 1px #6b6ce0;
}

.pcs-modal__card .pcs-picker-card > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.pcs-modal__card .pcs-picker-card > div::before {
  content: "";
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #e9e9fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.4-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center / 1.2rem no-repeat;
}

.pcs-modal__card .pcs-picker-card.is-selected > div::before {
  background-color: #6b6ce0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.4-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
}

.pcs-modal__card .pcs-picker-card > div > div {
  flex: 1 1 auto;
  min-width: 0;
}

.pcs-modal__card .pcs-picker-card > div > div > p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #4d5f75;
  text-align: left;
}

.pcs-modal__card .pcs-picker-card > div > div > p:first-child {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #122241;
}

.pcs-modal__card .pcs-picker-card > div > svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: #6b6ce0;
}

.pcs-modal__card .pcs-form__hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #4d5f75;
}

:is(.pcs-app, body) .pcs-modal__card .pcs-form .pcs-info-box {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #cdc9cd;
  border-left: 3px solid #6b6ce0;
  border-radius: 0.625rem;
  background: #f4f4fd;
  color: #122241;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---------- Edit client ---------- */
.pcs-modal__card:has(#edit-client-title) {
  width: min(38rem, 100%);
  background: #fff;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__head {
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  background: #f6f5f8;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__head::before {
  content: "";
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='12' width='52' height='40' rx='7' fill='%23e9e9fb' stroke='%23122241' stroke-width='2'/%3E%3Crect x='6' y='12' width='52' height='9' rx='4' fill='%236b6ce0'/%3E%3Ccircle cx='22' cy='34' r='6' fill='%23fff' stroke='%23122241' stroke-width='2'/%3E%3Cpath d='M12.5 46c1.6-4.6 5.2-7 9.5-7s7.9 2.4 9.5 7' fill='%23fff' stroke='%23122241' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M36 31h15M36 37h11M36 43h13' stroke='%23122241' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='16.5' r='1.6' fill='%23fff'/%3E%3Ccircle cx='45' cy='16.5' r='1.6' fill='%23fff'/%3E%3C/svg%3E") center / 2.6rem no-repeat;
  border: 1px solid #cdc9cd;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__title {
  display: block;
  font-size: 1.2rem;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__title > svg {
  display: none;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__lead {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcs-modal__card:has(#edit-client-title) .pcs-modal__close {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #cdc9cd;
  border-radius: 0.625rem;
  background: #fff;
}

/* Contact group card */
.pcs-modal__card:has(#edit-client-title) .pcs-form__grid,
.pcs-modal__card:has(#edit-client-title) .pcs-form > label.pcs-form__field {
  padding: 0.9rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.875rem;
  background: #fbfbfd;
}

.pcs-modal__card:has(#edit-client-title) .pcs-form__grid::before {
  content: "Contact";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 1.5rem;
  min-height: 1.1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6ce0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.4-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") left center / 1rem no-repeat;
}

.pcs-modal__card:has(#edit-client-title) .pcs-form > label.pcs-form__field > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.1rem;
  padding-left: 1.5rem;
  color: #6b6ce0;
  letter-spacing: 0.1em;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1rem;
}

.pcs-modal__card:has(#edit-client-title) .pcs-form > label.pcs-form__field:has(#client-address) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}
.pcs-modal__card:has(#edit-client-title) .pcs-form > label.pcs-form__field:has(#subscription-status) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 15 8.5l7 .9-5.1 4.8 1.3 6.9L12 17.8 5.8 21.1l1.3-6.9L2 9.4l7-.9L12 2Z'/%3E%3C/svg%3E");
}
.pcs-modal__card:has(#edit-client-title) .pcs-form > label.pcs-form__field:has(#notes) > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") !important;
}

/* Contact grid labels become quiet; the icon inside each box carries the meaning */
.pcs-modal__card:has(#edit-client-title) .pcs-form__grid .pcs-form__field > span:first-child {
  font-size: 0.625rem;
  color: #8494a7;
}

/* Icons inside inputs */
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-name,
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-phone,
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-email {
  padding-left: 2.6rem !important;
  background-repeat: no-repeat !important;
  background-position: 0.85rem center !important;
  background-size: 1.1rem !important;
}

:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-type {
  padding-left: 2.6rem !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0.85rem center, right 0.8rem center !important;
  background-size: 1.1rem, 1rem !important;
}

:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.4-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") !important;
}
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") !important;
}
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #client-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") !important;
}
:is(.pcs-app, body) .pcs-modal__card:has(#edit-client-title) #notes {
  min-height: 4.75rem !important;
}

.pcs-modal__card:has(#edit-client-title) .pcs-form__actions .pcs-btn--fill {
  min-width: 10rem;
}

@media (max-width: 479px) {
  .pcs-modal__card:has(#edit-client-title) .pcs-modal__head {
    padding: 0.85rem 0.95rem;
  }
  .pcs-modal__card:has(#edit-client-title) .pcs-modal__head::before {
    width: 3rem;
    height: 3rem;
    background-size: 2.2rem;
  }
  .pcs-modal__card:has(#edit-client-title) form.pcs-form {
    padding: 0.95rem 0.95rem 0;
  }
  .pcs-modal__card:has(#edit-client-title) form.pcs-form > .pcs-form__actions {
    margin: 0.35rem -0.95rem 0;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
  .pcs-modal__card:has(#edit-client-title) .pcs-form__actions .pcs-btn--fill {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.pcs-app, body) .pcs-modal__card .pcs-form input,
  :is(.pcs-app, body) .pcs-modal__card .pcs-form select,
  :is(.pcs-app, body) .pcs-modal__card .pcs-form textarea {
    transition: none;
  }
}

/* ---------- Create pipeline wizard ---------- */
/* Hide the floating assistant orb while any popup or sheet is open (it sat over wizard cards). */
body:has(.pcs-modal) #pcs-fab-live {
  visibility: hidden;
  pointer-events: none;
}

/* Sheets portalled to <body> sit outside .pcs-app, so the app button colours never reach them. */
body > .pcs-modal .pcs-btn--fill {
  background: #6b6ce0;
  border: 1px solid #6b6ce0;
  color: #fff;
  box-shadow: none;
}
body > .pcs-modal .pcs-btn--fill:hover:not(:disabled) {
  background: #5758cf;
  border-color: #5758cf;
}
body > .pcs-modal .pcs-btn--fill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body > .pcs-modal .pcs-btn--ghost {
  background: #fff;
  border: 1px solid #cdc9cd;
  color: #122241;
  box-shadow: none;
}
body > .pcs-modal .pcs-btn--ghost:hover:not(:disabled) {
  border-color: #122241;
}

:is(.pcs-app, body) .pcs-pipeline-modal .pcs-pipeline-wizard-embed {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  max-height: none !important;
  min-height: 0;
  overflow: hidden !important;
  background: #fff;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__head {
  flex-shrink: 0;
  align-items: center;
  gap: 0.85rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  background: #f6f5f8;
  border-bottom: 1px solid #e4e2e6;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__head::before {
  content: "";
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border: 1px solid #cdc9cd;
  border-radius: 0.875rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.5' fill='%23e9e9fb'/%3E%3Ccircle cx='19' cy='12' r='2.5' fill='%23e9e9fb'/%3E%3Ccircle cx='5' cy='18' r='2.5' fill='%236b6ce0' stroke='%236b6ce0'/%3E%3Cpath d='M7.5 6H13a3 3 0 0 1 3 3v.5M16.5 12H13a3 3 0 0 0-3 3v0a3 3 0 0 1-3 3h-.5'/%3E%3C/svg%3E") center / 1.9rem no-repeat;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__mobile-head,
:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__progress {
  flex-shrink: 0;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__foot {
  flex-shrink: 0;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e4e2e6;
  background: #fff;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__step > .pcs-invoice-wizard__step-lead {
  font-size: 0.8125rem;
  color: #4d5f75;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.7rem;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "icon title" "icon hint" "icon meta";
  align-items: start;
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  width: 100%;
  min-width: 0;
  padding: 0.9rem 2.6rem 0.9rem 0.9rem !important;
  border: 1px solid #cdc9cd !important;
  border-radius: 0.875rem !important;
  background: #fff !important;
  color: #122241;
  text-align: left;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:hover {
  border-color: #8494a7 !important;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:focus-visible {
  outline: 2px solid #6b6ce0;
  outline-offset: 2px;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card::before {
  content: "";
  grid-area: icon;
  width: 3rem;
  height: 3rem;
  border-radius: 0.8rem;
  background-color: #e9e9fb;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.55rem;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card.is-selected {
  border-color: #6b6ce0 !important;
  background: #f4f4fd !important;
  box-shadow: inset 0 0 0 1px #6b6ce0 !important;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card.is-selected::before {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #6b6ce0;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card.is-selected::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #6b6ce0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-title {
  grid-area: title;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #122241;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-hint {
  grid-area: hint;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #4d5f75;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-meta {
  grid-area: meta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem 0.15rem 1.45rem;
  border-radius: 999px;
  background: #f1f0f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5f75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4' cy='6' r='1.2'/%3E%3Ccircle cx='4' cy='12' r='1.2'/%3E%3Ccircle cx='4' cy='18' r='1.2'/%3E%3C/svg%3E") 0.45rem center / 0.8rem no-repeat;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4d5f75;
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='5' rx='1'/%3E%3Crect x='2' y='17' width='6' height='5' rx='1'/%3E%3Crect x='16' y='17' width='6' height='5' rx='1'/%3E%3Cpath d='M12 7v5M5 17v-3h14v3'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l13-3 2 6-13 3z'/%3E%3Cpath d='M16 10l4 1-1 3-4-1'/%3E%3Cpath d='M7 13l1 4H3v4'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01M11 6.5h6M11 17.5h6'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.8a15 15 0 0 1 20 0'/%3E%3Cpath d='M5 12.5a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 16a5 5 0 0 1 7 0'/%3E%3Cpath d='M12 19.5h.01'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5'/%3E%3Cpath d='M6 7h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(7)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v10H3z'/%3E%3Cpath d='M9.5 16a3.5 3.5 0 0 1 5 0'/%3E%3Cpath d='M7.5 13.5a6.5 6.5 0 0 1 9 0'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E");
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__template-card:nth-child(8)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}

/* Step 2 - project and client details */
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0.85rem;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields > * {
  grid-column: 1 / -1;
  min-width: 0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields > label[for="pipeline-client-email"],
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields > label[for="pipeline-client-phone"] {
  grid-column: auto;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields .pcs-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d5f75;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__control {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.85rem 0.6rem 2.6rem !important;
  border: 1px solid #cdc9cd !important;
  border-radius: 0.75rem !important;
  background: #fff no-repeat 0.85rem center / 1.1rem !important;
  font: inherit;
  font-size: 0.95rem;
  color: #122241;
  box-shadow: none !important;
  transition: border-color 0.15s;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__control:focus {
  outline: 2px solid #6b6ce0;
  outline-offset: 2px;
  border-color: #6b6ce0 !important;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card #pipeline-name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") !important; }
:is(.pcs-app, body) .pcs-pipeline-wizard__card #pipeline-client-name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important; }
:is(.pcs-app, body) .pcs-pipeline-wizard__card #pipeline-client-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important; }
:is(.pcs-app, body) .pcs-pipeline-wizard__card #pipeline-client-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") !important; }
:is(.pcs-app, body) .pcs-pipeline-wizard__card #pipeline-client-address { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important; }
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__client-input {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__client-input > input {
  flex: 1 1 auto;
  min-width: 0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__find-client {
  flex: 0 0 2.9rem;
  width: 2.9rem;
  min-height: 2.9rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem !important;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest {
  margin-top: -0.35rem;
  padding: 0.6rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.875rem;
  background: #f6f5f8;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-label {
  margin: 0 0 0.45rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8494a7;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-btn {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "icon name" "icon meta";
  column-gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.75rem;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-btn:hover,
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-btn:focus-visible {
  border-color: #6b6ce0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-btn::before {
  content: "";
  grid-area: icon;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #e9e9fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-name {
  grid-area: name;
  font-weight: 700;
  font-size: 0.9rem;
  color: #122241;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__suggest-meta {
  grid-area: meta;
  font-size: 0.78rem;
  color: #4d5f75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Step 3 - workflow steps */
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary .pcs-info-box {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid #d9d9f6;
  border-radius: 1rem;
  background: #f3f3fd;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary .pcs-info-box::before {
  content: "";
  grid-row: 1 / span 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M6.5 10v4a3 3 0 0 0 3 3H14'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
  border: 1px solid #d9d9f6;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary .pcs-info-box > p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #4d5f75;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary .pcs-info-box > .pcs-info-box__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #122241;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview {
  counter-reset: pcs-stage;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview > li {
  counter-increment: pcs-stage;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.35rem 0 0.35rem 2.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #122241;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview > li::before {
  content: counter(pcs-stage);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #cdc9cd;
  border-radius: 50%;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  color: #122241;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview > li:first-child::before {
  border-color: #6b6ce0;
  background: #6b6ce0;
  color: #fff;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.95rem - 0.5px);
  top: calc(50% + 0.95rem);
  height: calc(100% - 1.9rem);
  width: 1px;
  background: #cdc9cd;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-summary:has(> details[open]) > .pcs-pipeline-wizard__stage-preview {
  display: none;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details {
  margin: 0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-preview--full {
  margin-top: 0;
  max-height: none;
  overflow: visible;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0 0.95rem 0 1rem;
  border: 1px solid #d9d9f6;
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6b6ce0;
  list-style: none;
  cursor: pointer;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details > summary::-webkit-details-marker {
  display: none;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details > summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6ce0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details[open] > summary {
  margin-bottom: 0.75rem;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__stage-details[open] > summary::after {
  transform: rotate(180deg);
}

/* Step 4 - review */
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  column-gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.875rem;
  background: #fff;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:not(:nth-child(2), :nth-child(3)) {
  grid-column: 1 / -1;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div::before {
  content: "";
  grid-area: icon;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: #f1f0f3 center / 1.2rem no-repeat;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review dt {
  grid-area: label;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8494a7;
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review dd {
  grid-area: value;
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #122241;
  overflow-wrap: anywhere;
}

/* Pipeline detail - kanban board */
.pcs-pipeline-kanban__rule {
  display: none;
}
.pcs-pipeline-kanban__track {
  gap: 0.75rem;
  padding: 0.15rem 0.1rem 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: #cdc9cd transparent;
}
.pcs-pipeline-kanban__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 min(15.5rem, 78vw);
  min-height: 0;
  padding: 0.9rem;
  border: 1px solid #e4e2e6;
  border-radius: 0.9rem;
  background: #fff;
}
.pcs-pipeline-kanban__col.is-done {
  opacity: 1;
  background: #f6f5f8;
}
.pcs-pipeline-kanban__col.is-active {
  border-color: #6b6ce0;
  background: #f3f3fd;
  box-shadow: none;
}
.pcs-pipeline-kanban__col.is-locked {
  opacity: 0.6;
}
.pcs-pipeline-kanban__col-head {
  margin: 0;
}
.pcs-pipeline-kanban__order {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #cdc9cd;
  border-radius: 50%;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  color: #122241;
}
.pcs-pipeline-kanban__col.is-active .pcs-pipeline-kanban__order {
  border-color: #6b6ce0;
  background: #6b6ce0;
  color: #fff;
}
.pcs-pipeline-kanban__col.is-done .pcs-pipeline-kanban__order {
  border-color: #cfe9d8;
  background: #e7f5ec;
  color: #1f7a45;
}
.pcs-pipeline-kanban__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #122241;
}
.pcs-pipeline-kanban__due {
  gap: 0.3rem;
  margin: 0;
}
.pcs-pipeline-kanban__due > span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8494a7;
}
.pcs-app .pcs-pipeline-kanban__due input,
.pcs-app .pcs-pipeline-kanban__notes {
  width: 100%;
  border: 1px solid #cdc9cd !important;
  border-radius: 0.6rem !important;
  background: #fff !important;
  font-size: 0.85rem;
  color: #122241;
  box-shadow: none !important;
}
.pcs-app .pcs-pipeline-kanban__due input {
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem !important;
}
.pcs-app .pcs-pipeline-kanban__notes {
  min-height: 4.25rem;
  margin: 0;
  padding: 0.5rem 0.6rem !important;
}
.pcs-app .pcs-pipeline-kanban__due input:focus,
.pcs-app .pcs-pipeline-kanban__notes:focus {
  outline: 2px solid #6b6ce0;
  outline-offset: 2px;
}
.pcs-pipeline-kanban__actions {
  gap: 0.4rem;
  margin-top: auto;
}
.pcs-pipeline-kanban__actions .pcs-btn {
  flex: 1 1 auto;
  min-height: 2.4rem;
  justify-content: center;
  font-size: 0.8rem;
}

/* Pipeline detail - send project view */
.pcs-project-view-send__sent {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  margin: 0.25rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid #cfe9d8;
  border-radius: 0.875rem;
  background: #f1faf4;
}
.pcs-project-view-send__sent > svg {
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.6rem;
  border: 1px solid #cfe9d8;
  border-radius: 0.7rem;
  background: #fff;
  color: #1f7a45;
}
.pcs-project-view-send__sent-title {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f7a45;
}
.pcs-project-view-send__sent-meta {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #122241;
  overflow-wrap: anywhere;
}
.pcs-project-view-send__sent-note {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #4d5f75;
}
.pcs-project-view-send__actions,
.pcs-project-view-send__link-row,
.pcs-project-view-send__compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 479px) {
  :is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields,
  :is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields > label[for="pipeline-client-email"],
  :is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__fields > label[for="pipeline-client-phone"] {
    grid-column: 1 / -1;
  }
}

:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
:is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__review > div:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='m3 6 1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17'/%3E%3C/svg%3E");
}

@media (max-width: 479px) {
  :is(.pcs-app, body) .pcs-pipeline-wizard__card > .pcs-invoice-wizard__head::before {
    width: 2.6rem;
    height: 2.6rem;
    background-size: 1.6rem;
  }
  :is(.pcs-app, body) .pcs-pipeline-wizard__card .pcs-pipeline-wizard__step > .pcs-invoice-wizard__step-lead {
    display: none;
  }
}