/* ============================================================================
   Print Way — consolidated UX correction layer (A–G).
   Additive, prefixed (.pw-*) so it never overrides existing global styles. RTL-first.
   Reuses the existing design tokens (--c3-*, --primary-dark, --border) with safe fallbacks.
   ============================================================================ */

/* ---- shared form controls (D): consistent height, radius, focus + selected ---- */
.pw-input, .pw-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  color: var(--c3-navy-2, #1d3f63);
  background: #fff;
  border: 1.5px solid var(--c3-hair, #e0e5ec);
  border-radius: 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}
.pw-select {
  /* readable native select with an RTL-safe custom caret */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-inline-start: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231d3f63' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 12px;
}
.pw-input:focus, .pw-select:focus {
  outline: none;
  border-color: var(--c3-copper, #b26a3c);
  box-shadow: 0 0 0 3px rgba(178, 106, 60, .16);
}
.pw-label { display: block; font-size: 13px; font-weight: 600; color: var(--c3-navy-2, #1d3f63); margin-bottom: 5px; }
.pw-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c3-navy-2, #1d3f63); }
.pw-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--c3-navy, #0f2740); }

/* a status pill (active / inactive) — replaces ad-hoc coloured spans */
.pw-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pw-pill.on  { background: rgba(61, 154, 104, .14); color: #1e7a3d; }
.pw-pill.off { background: rgba(29, 63, 99, .10);  color: #64748b; }

/* ---- balanced form composition (E/F): responsive grid + attached action footer ---- */
.pw-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; align-items: start; }
.pw-form .pw-col-full { grid-column: 1 / -1; }
.pw-fieldset { border: 1px solid var(--c3-hair, #e0e5ec); border-radius: 12px; padding: 14px 16px; margin: 0 0 4px; }
.pw-fieldset > legend { font-size: 12px; font-weight: 700; color: var(--c3-copper, #b26a3c); padding: 0 6px; }
.pw-form-footer {
  grid-column: 1 / -1;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--c3-hair, #e0e5ec);
}
.pw-form-footer .pw-spacer { margin-inline-start: auto; }

/* ---- structured admin table + inline edit (A: payment types/methods) ---- */
.pw-admin-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.pw-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- POS split payment rows (C): each component an independent card ----
   Type -> Method -> Amount -> Remove, wraps/stacks when width is insufficient,
   uses the same visual language as the single-mode chooser. */
.pw-split-list { display: flex; flex-direction: column; gap: 10px; }
.pw-split-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(140px, 1.4fr) minmax(96px, 120px) auto;
  gap: 10px; align-items: end;
  border: 1.5px solid var(--c3-hair, #e0e5ec);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.pw-split-row .pw-label { margin-bottom: 4px; font-size: 12px; }
.pw-split-remove {
  align-self: end; height: 40px; width: 40px; border-radius: 10px;
  border: 1.5px solid var(--c3-hair, #e0e5ec); background: #fff; color: #b00;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.pw-split-remove:hover { border-color: #b00; }
.pw-split-summary {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c3-hair, #e0e5ec);
  font-size: 14px;
}
.pw-split-summary .paid { color: var(--c3-navy-2, #1d3f63); font-weight: 600; }
.pw-split-summary .rem strong { font-size: 16px; }
@media (max-width: 560px) {
  .pw-split-row { grid-template-columns: 1fr 1fr; }
  .pw-split-row .pw-split-remove { grid-column: 2; justify-self: end; }
}