/* add_steps.css — the Add / Edit item panel in four steps (Luis, 2026-10-12).
   Script: add_steps.js. The panel's own blue (#1a5fa8, as the parts radios)
   for the step in hand, green for a finished one. */

/* ── The step bar ── */
.pf-steps { list-style: none; display: flex; gap: 8px; margin: 2px 0 18px; padding: 0; }
.pf-steps li { flex: 1 1 0; min-width: 0; }
.pf-steps button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 12px; cursor: default;
  border: 1.5px solid rgba(120, 140, 170, .25); background: #f6f8fb; color: #8496b0;
  font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; white-space: nowrap;
  transition: border-color .18s cubic-bezier(.4, 0, 1, 1), background .18s cubic-bezier(.4, 0, 1, 1), color .18s cubic-bezier(.4, 0, 1, 1);
}
.pf-steps button span { overflow: hidden; text-overflow: ellipsis; }
.pf-steps button b {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: #e3e9f2; color: #64748b;
}
.pf-steps li.is-open button { cursor: pointer; }
.pf-steps li.is-open:not(.is-on) button:hover { border-color: rgba(26, 95, 168, .35); color: #1a5fa8; }
.pf-steps li.is-on button {
  border-color: #1a5fa8; background: #eaf1fb; color: #1a5fa8;
  transition-duration: .30s; transition-timing-function: var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}
.pf-steps li.is-on button b { background: #1a5fa8; color: #fff; box-shadow: 0 3px 8px rgba(26, 95, 168, .30); }
.pf-steps li.is-done button { color: #0b6b4f; }
.pf-steps li.is-done button b { background: #059669; color: #fff; font-size: 0; }
.pf-steps li.is-done button b::after { content: '✓'; font-size: 13px; }

/* ── One step at a time, arriving from the side it came from ── */
.pf-step[hidden] { display: none !important; }
/* The same height for each, so the panel does not jump between steps. */
.pf-step { min-height: 300px; }
.pf-step.pf-in      { animation: pfIn .30s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
.pf-step.pf-in-back { animation: pfInBack .30s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
@keyframes pfIn     { from { opacity: 0; transform: translateX(16px); }  to { opacity: 1; transform: none; } }
@keyframes pfInBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* ── The buttons: Cancel and what is missing at the left, Back / Next / Save at the right ── */
.phone-form-actions [hidden] { display: none !important; }
.phone-form-actions .pf-need { margin-right: auto; align-self: center; font-size: 12.5px; font-weight: 600; color: #b45309; }
.phone-form-actions .pf-next:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Two columns (2026-10-13): the device on the left, the steps on the right ──
   The form is the grid; the column spans the step bar and the step, and the
   buttons run under both. */
.phone-modal-card { max-width: 900px; }
#phoneForm { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 26px; }
#phoneForm > .pf-side { grid-column: 1; grid-row: 1 / 3; }
#phoneForm > .pf-steps { grid-column: 2; grid-row: 1; }
#phoneForm > .pf-step { grid-column: 2; grid-row: 2; }
#phoneForm > .phone-form-actions { grid-column: 1 / -1; grid-row: 3; }

.pf-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-side .modal-img-preview { height: 230px; min-height: 0; border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef2f8 70%) !important; border: 1px solid rgba(120, 140, 170, .2) !important; }
/* multiply: a photo shot on white loses its white box against the panel. */
.pf-side .modal-img-thumb { max-width: 86%; max-height: 204px; object-fit: contain; mix-blend-mode: multiply; animation: pfPhoto .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
@keyframes pfPhoto { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
/* Before the colour: a phone outline over the words. */
.pf-side .modal-img-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 22px;
  text-align: center; font-size: 12px; line-height: 1.4; color: #8496b0; }
.pf-side .modal-img-placeholder::before { content: ''; width: 44px; height: 70px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 38' fill='none' stroke='%238496b0' stroke-width='1.6'%3E%3Crect x='1.5' y='1.5' width='21' height='35' rx='4.5'/%3E%3Cpath d='M9.5 4.6h5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.pf-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-name { font-size: 16px; font-weight: 800; line-height: 1.25; color: #0d2a52; overflow-wrap: anywhere; }
.pf-name.is-empty { font-weight: 700; color: #a3b0c2; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eaf1fb; color: #1a5fa8; }
.pf-block { display: flex; flex-direction: column; gap: 5px; padding-top: 9px; border-top: 1px dashed rgba(120, 140, 170, .32); }
.pf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.pf-row span { color: #8496b0; flex: 0 0 auto; }
.pf-row b { font-weight: 700; color: #0d2a52; text-align: right; overflow-wrap: anywhere; }
/* The house colours: cost silver, price (the sale) plum, profit green. */
.pf-row.is-cost b   { color: #6e6e73; }
.pf-row.is-price b  { color: #6b3744; }
.pf-row.is-profit b { color: #1f8a4c; }
.pf-row.is-loss b   { color: #b42318; }
.pf-row.is-am b     { color: #DC2626; }
/* A block arriving: once, when its step is passed. */
.pf-new { animation: pfRow .30s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
@keyframes pfRow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  #phoneForm { grid-template-columns: 1fr; grid-template-rows: none; }
  #phoneForm > .pf-side, #phoneForm > .pf-steps, #phoneForm > .pf-step, #phoneForm > .phone-form-actions { grid-column: 1; grid-row: auto; }
  .pf-side { flex-direction: row; align-items: center; margin-bottom: 14px; }
  .pf-side .modal-img-preview { width: 120px; height: 120px; flex: 0 0 auto; }
  .pf-side .modal-img-thumb { max-height: 104px; }
}

/* The AM parts panel beside the card belongs to step 3. */
.phone-modal-card.parts-open:not([data-step="3"]) + .parts-side-panel { display: none; }

@media (max-width: 560px) {
  .pf-steps button { justify-content: center; padding: 6px; }
  .pf-steps button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-step.pf-in, .pf-step.pf-in-back, .pf-new, .pf-side .modal-img-thumb { animation: none; }
  .pf-steps button { transition: none; }
}