/* ============================================
   js/customer_app/customer_app_home.css
   Βήμα 2 «Αρχική σελίδα» και οθόνη «Ποιότητες»: ίδιο ύφος σε κινητό και υπολογιστή (docs/design/fason/).
   Χρώματα κατάστασης: εντάξει #1F6B33 · θέλει προσοχή #9A3412 · ουδέτερο #4B5563. Στόχοι αφής ≥ 44px.
   ============================================ */

.cah-wrap { padding-bottom: 8px; }
.cah-small { font-size: 15px; }
.cah-gap { margin-top: 18px; }
.cah-good { color: #1F6B33; }
.cah-bad { color: #9A3412; }
.cah-neutral { color: #4B5563; }

/* Εμφάνιση */
.cah-sample { display: inline-block; min-height: 52px; padding: 12px 20px; border: 2px solid #000000; border-radius: 10px; font-weight: 700; background: #FFFFFF; }
.cah-palettes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.cah-pal { flex: 1 1 110px; min-height: 52px; padding: 12px 14px; border: 2px solid #CBD5E1; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.cah-pal.is-on { border-color: #000000; box-shadow: 0 0 0 2px #000000; }
.cah-pal:focus-visible, .cah-switch:focus-visible, .cah-pitem:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }

/* Γραμμές ενοτήτων: [διακόπτης | όνομα + κατάσταση | σύνδεσμος] */
.cah-rows { list-style: none; margin: 0; padding: 0; }
.cah-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; border-top: 1px solid #E2E8F0; }
.cah-row:first-child { border-top: 0; }
.cah-always { justify-self: start; font-size: 15px; font-weight: 600; color: #4B5563; background: #F1F5F9; border-radius: 8px; padding: 6px 10px; }
.cah-body { min-width: 0; }
.cah-name { display: block; font-size: 18px; overflow-wrap: anywhere; }
.cah-line { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.cah-link { min-height: 44px; min-width: 44px; padding: 8px 4px; white-space: nowrap; }
.cah-switch { position: relative; width: 56px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: #94A3B8; cursor: pointer; }
.cah-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; transition: left 0.15s; }
.cah-switch.is-on { background: #1F6B33; }
.cah-switch.is-on::after { left: 16px; }
.cah-switch:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 480px) {
  .cah-row { grid-template-columns: 64px minmax(0, 1fr); }
  .cah-link { grid-column: 2; justify-self: start; }
}

/* Μπάρα αποθήκευσης (σταθερή στο κάτω μέρος) */
.cah-savebar { position: sticky; bottom: 0; background: #FFFFFF; border-top: 1px solid #E2E8F0; padding: 10px 0 12px; margin-top: 12px; z-index: 2; }
.cah-save { width: 100%; min-height: 52px; }
.cah-savebar .ca-note { margin: 0 0 8px; }

/* Ποιότητες */
.cah-qtop { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.cah-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.cah-thumb.is-empty { border: 2px dashed #94A3B8; }
.cah-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }
.cah-field { display: block; flex: 1 1 auto; min-width: 0; margin: 0; }
.cah-flabel { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cah-field input, .cah-name-in { width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; border: 2px solid #94A3B8; border-radius: 10px; box-sizing: border-box; }
.cah-err { display: block; margin-top: 4px; font-size: 15px; color: #9A3412; overflow-wrap: anywhere; }
.cah-modes { display: flex; flex-wrap: wrap; gap: 10px; }
.cah-mode { flex: 1 1 150px; }
.cah-mode.is-on { background: #000000; color: #FFFFFF; }
.cah-pricewrap { margin-top: 10px; max-width: 260px; }
.cah-size { margin: 10px 0; }
.cah-shead { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 4px; }
.cah-shint { font-size: 15px; color: #4B5563; }
.cah-pair { display: flex; gap: 10px; align-items: flex-end; }
.cah-pair .cah-field { max-width: 140px; }
.cah-eur { font-weight: 600; padding-bottom: 12px; }
.cah-verdict { font-size: 16px; margin: 8px 0 12px; font-weight: 600; }
.cah-remove { color: #B91C1C; border-color: #B91C1C; width: 100%; }
.cah-add { width: 100%; border-style: dashed; margin: 4px 0 8px; }
.cah-pgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.cah-pitem { width: 72px; height: 72px; padding: 3px; border: 2px solid #CBD5E1; border-radius: 10px; background: #FFFFFF; cursor: pointer; }
.cah-pitem.is-on { border-color: #000000; box-shadow: 0 0 0 2px #000000; }
.cah-pitem img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }