/* ============================================================
   saas_settings_prices.css — Ρυθμίσεις → Τιμές & Είδη (style/settings-price-screens)
   Οθόνες: Λευκά είδη, Τιμοκατάλογος ανά υπηρεσία, Επισκευές, Χαρακτηριστικά και ποιότητες χαλιών.
   Ύφος docs/design/fason/: λευκές κάρτες (#FFF, περίγραμμα #E2E8F0, γωνίες 12px) πάνω στο φόντο της σελίδας — ΚΑΝΕΝΑ
   σταθερό χρώμα φόντου σελίδας εδώ (το φόντο κληρονομείται από το body: var(--cfx-page-bg)).
   Ονόματα ΑΚΡΙΒΩΣ όπως γράφονται: καμία text-transform, κανένα κόψιμο (ellipsis). Μεγάλα γράμματα κινητού: μονάδες em/rem,
   ετικέτες/μονάδες nowrap, ομάδες flex-wrap που κατεβαίνουν ολόκληρες.
   Χρώμα με ρόλο: πράσινη μπάρα τίτλου, σκούρο μπλε κεφαλίδα φόρμας/ετικέτες, μπλε ενέργειας για ό,τι πατιέται και κύριο κουμπί,
   πορτοκαλί για κενή/0 τιμή, κόκκινο ΜΟΝΟ στη διαγραφή.
   ============================================================ */
:root {
  --spx-navy: var(--chrome-bg, #042C53);
  --spx-green-bg: #EAF3DE;
  --spx-green-fg: var(--chrome-avatar-text, #173404);
  --spx-action: #2563EB;
  --spx-action-dark: #1D4ED8;
  --spx-strong: #0F172A;
  --spx-line: #E2E8F0;
  --spx-muted: #64748B;
  --spx-orange: #E67E22;
  --spx-orange-bg: #FFF4E5;
  --spx-orange-fg: #B45309;
  --spx-red: #B91C1C;
}

/* ── Κάρτα + μπάρα τίτλου ── */
.spx-card { background: #FFFFFF; border: 1px solid var(--spx-line); border-radius: 12px; padding: 0; margin-top: 12px; }
.card.spx-card { padding: 0; }
.spx-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 11px 11px 0 0; background: var(--spx-green-bg); color: var(--spx-green-fg); font-size: 1rem; font-weight: 600; }
.spx-bar-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: break-word; word-break: normal; }
.spx-bar-count { flex: 0 0 auto; white-space: nowrap; font-size: .85rem; font-weight: 500; }
.spx-bar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.spx-bar-main .spx-bar-name { flex: 0 1 auto; }
.spx-bar-main .spx-bar-count { font-weight: 500; }
.spx-bar-form { background: var(--spx-navy); color: #F1F6FC; }
.spx-card.spx-new { margin-top: 0; border: 1.5px solid var(--spx-action); }
.spx-pad { padding: .9rem; }
.spx-body { padding: .25rem .9rem .7rem; }

/* ── Εικονίδια (πατιούνται ⇒ μπλε ενέργειας) και μενού ── */
.spx-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--spx-action); cursor: pointer; }
.spx-icon:hover { background: rgba(37, 99, 235, .1); }
.spx-chev svg { transition: transform .15s ease; }
.spx-chev-open svg { transform: rotate(180deg); }
.spx-menu-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.spx-menu { position: absolute; right: 0; top: 100%; z-index: 40; display: flex; flex-direction: column; width: max-content; max-width: 90vw; padding: .25rem; background: #FFFFFF; border: 1px solid var(--spx-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.spx-mi { margin: 0; padding: .55rem .8rem; border: 0; border-radius: 6px; background: none; color: var(--spx-strong); font-size: .9rem; text-align: left; white-space: nowrap; cursor: pointer; }
.spx-mi:hover:not(:disabled) { background: #F1F5F9; }
.spx-mi:disabled { opacity: .4; cursor: not-allowed; }
.spx-mi-del { color: var(--spx-red); }

/* ── Γραμμές τιμών (Λευκά είδη) ── */
.spx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--spx-line); }
.spx-row-hl { background: #EEF4FF; box-shadow: 0 0 0 2px var(--spx-action); border-radius: 8px; }
.spx-lbl { flex: 1 1 12em; min-width: 0; font-size: .95rem; color: var(--spx-strong); overflow-wrap: break-word; word-break: normal; }
.spx-mat { font-weight: 600; }
.spx-size { font-weight: 600; color: var(--spx-action); }
.spx-warn-txt { font-weight: 600; color: var(--spx-orange-fg); }
.spx-price-grp { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; white-space: nowrap; }
.spx-unit { color: var(--spx-muted); font-size: .85rem; white-space: nowrap; }
.spx-price { box-sizing: border-box; width: 6.5em; padding: .5rem .6rem; border: 1px solid var(--spx-line); border-radius: 8px; background: #FFFFFF; color: var(--spx-strong); font-size: .95rem; font-weight: 700; text-align: right; }
.spx-price-empty { border-color: var(--spx-orange) !important; background: var(--spx-orange-bg) !important; }
.spx-empty { padding: .75rem 0; color: var(--spx-muted); font-size: .9rem; }
.spx-empty-card { padding: .9rem; color: var(--spx-muted); font-size: .9rem; }
.spx-meta { padding-top: .5rem; color: #94A3B8; font-size: .75rem; }
.spx-meta-total { margin: .6rem .25rem 0; padding-top: 0; }
.spx-note, .spx-hint { margin: 0 0 .6rem; color: var(--spx-muted); font-size: .85rem; }
.spx-ferr, .spx-row-err { flex-basis: 100%; color: var(--spx-orange-fg); font-size: .8rem; }
.spx-linen > .spx-card + .spx-card { margin-top: .75rem; }
#linen-new-price { margin-bottom: .75rem; }

/* ── Φόρμα «Νέα τιμή» ── */
.spx-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; padding: .9rem; }
.spx-field { display: flex; flex-direction: column; flex: 1 1 11em; gap: .3rem; min-width: 0; }
.spx-field-price { flex: 0 1 14em; }
.spx-label { color: var(--spx-navy); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.spx-input { box-sizing: border-box; width: 100%; min-width: 0; padding: .6rem .75rem; border: 1px solid var(--spx-line); border-radius: 10px; background: #FFFFFF; color: var(--spx-strong); font-size: .95rem; }
.spx-input.spx-invalid, .spx-price.spx-invalid { border-color: var(--spx-orange); }
.spx-newrow { display: flex; align-items: center; gap: .5rem; }
.spx-link { flex: 0 0 auto; margin: 0; padding: .25rem; border: 0; background: none; color: var(--spx-action); font-size: .82rem; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.spx-form-err { flex-basis: 100%; color: var(--spx-orange-fg); font-size: .9rem; }
.spx-form .spx-btn-primary { flex: 0 0 auto; align-self: flex-end; }

/* ── Κύριο κουμπί: γεμάτο μπλε ενέργειας (ποτέ μαύρο) ── */
.spx-btn-primary { flex: 0 0 auto; margin: 0; padding: .65rem 1.1rem; border: 0; border-radius: 10px; background: var(--spx-action); color: #FFFFFF; font-size: .95rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.spx-btn-primary:hover:not(:disabled) { background: var(--spx-action-dark); }
.spx-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
#modal-linen-edit .btn-primary { background: var(--spx-action); color: #FFFFFF; }

/* ── Χαρακτηριστικά και ποιότητες χαλιών: πλέγμα κελιών ── */
.spx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 600px) { .spx-grid { grid-template-columns: 1fr; } }
.spx-cell { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--spx-line); border-radius: 10px; background: #FFFFFF; }
.spx-cell-name { flex: 1 1 auto; min-width: 0; color: var(--spx-strong); font-size: .92rem; font-weight: 600; overflow-wrap: break-word; word-break: normal; }
.spx-swatch { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .15); }
.spx-del { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--spx-red); cursor: pointer; }
.spx-del:hover:not(:disabled) { background: #FEF2F2; }
.spx-del:disabled { opacity: .4; cursor: not-allowed; }
.spx-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.spx-addrow .spx-input { flex: 1 1 12em; width: auto; }
.spx-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .9rem; }

/* ── Τιμοκατάλογος ανά υπηρεσία + Επισκευές: ΜΟΝΟ χρώμα, πάνω στο υπάρχον markup (κλάσεις spx-ct / spx-lbl-d / spx-act /
      svc-price-input / spx-price-in). Το markup έχει inline στυλ ⇒ !important όπου συγκρούεται. ── */
#settings-services-detail .spx-ct { margin: -18px -18px 14px !important; padding: .55rem 1rem !important; border-radius: 11px 11px 0 0; background: var(--spx-green-bg) !important; color: var(--spx-green-fg) !important; font-weight: 600 !important; }
#settings-services-detail .spx-lbl-d { color: var(--spx-navy) !important; }
#settings-services-detail .spx-act { color: var(--spx-action) !important; }
#settings-services-detail .svc-price-input, #settings-services-detail .spx-price-in { color: var(--spx-strong) !important; font-weight: 700 !important; }
#settings-services-detail .svc-price-input.spx-price-empty, #settings-services-detail .spx-price-in.spx-price-empty { border-color: var(--spx-orange) !important; background: var(--spx-orange-bg) !important; }