/* ============================================================
   TDS Assistant — VERNILAC
   Σκέτο CSS, καμία εξωτερική γραμματοσειρά ή βιβλιοθήκη: η εφαρμογή
   δεν βγαίνει στο internet (NIS2), οπότε ό,τι φορτώνεται από CDN δεν
   θα εμφανιζόταν καν.

   ⚠️ ΧΡΩΜΑ: κανένα hex σε αυτό το αρχείο. ΚΑΘΕ χρώμα έρχεται από
   μεταβλητή του tokens.css. Καμία διαβάθμιση, καμία σκιά, καμία
   διάρκεια μετάβασης πάνω από 200ms, πουθενά ease-in, πουθενά
   «transition: all».
   ============================================================ */

/* Inter — τοπικά (έχει πλήρη ελληνικά), μεταβλητή 100-900 ώστε να
   δέχεται τα ενδιάμεσα βάρη της οπτικής διόρθωσης του σκούρου θέματος. */
@font-face {
  font-family: 'InterVariable';
  src: url('/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* Άμεσα, αξιόπιστα taps σε αφή: χωρίς καθυστέρηση double-tap-zoom */
button, .nav-btn, .quick-q, .empty-cat, .vote, .list-item {
  touch-action: manipulation;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--v-text);
  background: var(--v-canvas);
}

/* Σε σκούρο φόντο τα ανοιχτά γράμματα «φουσκώνουν»: η εξομάλυνση σε
   επίπεδο υποεικονοστοιχείου (προεπιλογή σε φωτεινό) τα παχαίνει και τα
   θολώνει. Γκρίζα κλίμακα + τα μειωμένα βάρη --w-* του tokens.css τα
   επαναφέρουν στο σωστό οπτικό πάχος. */
:root[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════ header */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  /* Ζώνη αναπνοής: η κεφαλίδα δεν ακουμπάει ποτέ την πάνω ακμή */
  padding: 14px 20px 12px;
  background: var(--v-canvas);
  border-bottom: 1px solid var(--v-line);
}

/* Η σφραγίδα φαίνεται ΟΛΟΚΛΗΡΗ, με ζώνη προστασίας 25% του ύψους της
   σε κάθε πλευρά (εγχειρίδιο ταυτότητας). Το λευκό πλαίσιο είναι το
   πεδίο αναφοράς της — δεν κόβεται και δεν στριμώχνεται. */
/* Η ΣΦΡΑΓΙΔΑ στην κεφαλίδα (επιλογή Στέφανου 27/08 — δοκιμάστηκε το
   λεκτικό λογότυπο και προτίμησε αυτήν).
   ⚠️ Το πεδίο της είναι ΠΑΝΤΑ ΛΕΥΚΟ, σε κάθε θέμα: το κόκκινο και το
   μπλε κληρονομιάς ζουν ΜΟΝΟ μέσα στη σφραγίδα και πάνω σε σκούρο φόντο
   γίνονται δυσανάγνωστα. Σε φωτεινό θέμα το πεδίο είναι αόρατο (λευκό
   σε λευκό)· σε σκούρο γίνεται το πλαίσιό της.
   Ζώνη προστασίας: 25% του ύψους της σε κάθε πλευρά. */
header .logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;                 /* 25% του ύψους 28px της σφραγίδας */
  border-radius: var(--r-edge);
  background: var(--v-paper);
  flex: none;
}
header img.logo { height: 28px; width: auto; display: block; }

.title {
  color: var(--v-text);
  font-weight: var(--w-semi);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.title small {
  display: block;
  font-weight: 400;
  font-size: .78rem;
  color: var(--v-text-muted);
  letter-spacing: 0;
  margin-top: 2px;
}

#who {
  margin-left: auto;
  font-size: .8rem;
  color: var(--v-text-muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}
/* Κατάσταση «υγιής/συνδεδεμένος» = Lime (το εγχειρίδιο δίνει το Lime
   στις επιτυχείς καταστάσεις). */
#who .dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--v-lime);
}

nav { display: flex; gap: 0; flex-wrap: wrap; width: 100%; }

/* Καρτέλες: το ενεργό ΔΕΝ έχει γέμισμα — έχει υπογράμμιση 3px σε Sky.
   (Το παλιό τιρκουάζ γέμισμα ήταν εκτός παλέτας και 1,63:1.) */
.nav-btn {
  appearance: none;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--v-text-muted);
  border-radius: 0;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-snap),
              border-color var(--t-base) var(--ease-snap);
}
.nav-btn:hover { color: var(--v-text); }
.nav-btn.active {
  color: var(--v-text);
  border-bottom-color: var(--v-sky);
  font-weight: var(--w-semi);
}
/* Η Αποσύνδεση στέκεται χωριστά — και είναι το ΜΟΝΟ στοιχείο
   πλοήγησης που επιτρέπεται να χρησιμοποιήσει Flame στο hover. */
.nav-btn.danger { margin-left: auto; }
.nav-btn.danger:hover { color: var(--v-flame); }

/* ═══════════════════════════════════════════════════ layout */

main { max-width: 940px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }

/* ⚠️ ΤΟ ΠΛΑΤΟΣ ΑΛΛΑΖΕΙ ΜΟΝΟ ΣΕ ΥΠΟΛΟΓΙΣΤΗ (εντολή Στέφανου 02/09/2026:
   «άλλο το desktop, άλλο το mobile — μην πειράξεις το κινητό»).
   Η βάση παραπάνω μένει ΑΚΡΙΒΩΣ όπως ήταν, άρα το κινητό δεν αγγίζεται
   καθόλου. Ό,τι ακολουθεί ισχύει από 621px και πάνω. */


.view { display: none; }
.view.active { display: block; animation: rise 200ms var(--ease-snap) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Οι κάρτες των εργαλείων είναι ΛΕΥΚΕΣ: είναι το πεδίο αναφοράς για
   κάθε απόχρωση που θα εμφανιστεί μέσα τους. */
.card {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: 1.25rem 1.4rem 1.35rem;
  margin-bottom: 1rem;
  color: var(--v-text);
}

h2 {
  font-size: 1.02rem;
  color: var(--v-text);
  margin: 0 0 .85rem;
  letter-spacing: -.01em;
}

/* ══════════════════════════════════ πίνακας «φάση ελέγχου» */

/* ⚠️ ΚΡΥΦΟ ΑΠΟ ΤΟ CSS, όχι από το JS. Το πάνελ υπάρχει ολόκληρο μέσα στο
   index.html· αν το κρύψει το app.js, ο browser προλαβαίνει να το
   ζωγραφίσει όσο κατεβάζει το script και «αναβοσβήνει» ένα μεγάλο μπλοκ
   πίσω από τη σελίδα σε κάθε refresh. Το CSS φορτώνει στο <head>, πριν
   από κάθε ζωγραφιά — άρα εδώ δεν φαίνεται ποτέ.
   Ανοίγει με την κλάση .show, από το «Τι κάνουμε εδώ;». */

.phase {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-edge);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.1rem;
  color: var(--v-text);
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
}
.phase > * { position: relative; }

/* Σήμα «Φάση ελέγχου»: Sun με γράμματα ink — 15,4:1, αδύνατο να το
   προσπεράσεις. Ένα εργαλείο σε δοκιμή που δείχνει πραγματικά δεδομένα
   πρέπει να το λέει δυνατά. */
.phase-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: var(--w-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: var(--r-badge);
  color: var(--v-ink);          /* σταθερό: γράμματα πάνω σε Sun */
  background: var(--v-sun);
}
.phase-tag .pulse {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--v-ink);     /* σταθερό: πάνω σε Sun */
  animation: pulse 1.8s linear infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.phase h1 {
  font-weight: var(--w-bold);
  font-size: 1.35rem;
  margin: .7rem 0 .4rem;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.phase p { margin: 0 0 1rem; color: var(--v-text-muted); font-size: 1rem; }
.phase p:last-child { margin-bottom: 0; }
.phase strong { color: var(--v-text); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}
.step {
  background: var(--v-surface-2);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .75rem .8rem;
}
.step .n {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-edge);
  font-size: .78rem; font-weight: var(--w-bold);
  color: var(--v-ink);          /* σταθερό: γράμματα πάνω σε Sky */
  background: var(--v-sky);
  margin-bottom: .45rem;
}
.step b { display: block; font-size: .87rem; margin-bottom: .12rem; color: var(--v-text); }
.step span { font-size: .79rem; color: var(--v-text-muted); line-height: 1.45; }

.phase-close {
  position: absolute;
  top: .8rem; right: .9rem;
  background: transparent;
  border: 1px solid var(--v-line);
  color: var(--v-text-muted);
  border-radius: var(--r-edge);
  width: 28px; height: 28px;
  font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.phase-close:hover { border-color: var(--v-line-hover); color: var(--v-text); }

/* ═══════════════════════════════════════════════════ συνομιλία */

#thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.1rem; }

.msg { display: flex; flex-direction: column; animation: rise 200ms var(--ease-snap) both; }

.bubble {
  border-radius: var(--r-bubble);
  padding: .85rem 1.1rem;
  overflow-wrap: anywhere;
}

/* Η ερώτηση του χρήστη: λευκό πεδίο με μαύρα γράμματα — η ταυτότητα
   της μάρκας είναι ακριβώς αυτή, και ξεχωρίζει αμέσως από την απάντηση
   χωρίς να ξοδέψει κανένα χρώμα έμφασης. */
.msg.user { align-items: flex-end; }
.msg.user .bubble {
  max-width: 86%;
  color: var(--v-canvas);
  background: var(--v-text);
  border-bottom-right-radius: 6px;
}

.msg.bot .bubble {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-bottom-left-radius: 6px;
  color: var(--v-text);
}

.bubble p { margin: 0 0 .65rem; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: .35rem 0 .65rem; padding-left: 1.15rem; }
.bubble li { margin: .2rem 0; }
.bubble li::marker { color: var(--v-text-muted); }
.bubble strong { font-weight: var(--w-bold); }

/* Σφάλμα: το Flame ως γραμμή 3px, το κείμενο μένει αναγνώσιμο.
   (Flame σε σκούρο = 3,8:1 — ποτέ για σώμα κειμένου.) */
.msg.error .bubble {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-flame);
  color: var(--v-text);
}

/* Η απάντηση καθώς γράφεται ζωντανά, μέσα στη φούσκα αναμονής */
.stream-text {
  white-space: pre-wrap;
  margin-top: .5rem;
  color: var(--v-text);
}
.stream-text:empty { display: none; }
.stream-text::after {
  content: '▍';
  color: var(--v-sky);
  animation: blinkCursor 1s steps(1) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

/* ───────────────────────────── υποσημείωση απάντησης */

.meta {
  margin-top: .55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem;
  font-size: .8rem;
  color: var(--v-text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: var(--r-pill);
  height: 22px;
  padding: 0 .6rem;
  font-size: .72rem;
  font-weight: var(--w-semi);
  letter-spacing: .01em;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--v-line);
  color: var(--v-text);
}
/* Το χρώμα δεν κουβαλάει ποτέ μόνο του νόημα: κάθε κατάσταση έχει και
   λεκτικό. Η έμφαση μπαίνει ως γραμμή 3px, όχι ως χρωματιστό κείμενο
   που θα έπεφτε κάτω από 4,5:1 σε λευκό. */
.chip.flag     { border-left: 3px solid var(--v-amber); }
.chip.approved { border-left: 3px solid var(--v-lime); font-weight: var(--w-semi); }
.chip.rejected { border-left: 3px solid var(--v-flame); }
.chip.plain    { border-color: transparent; color: var(--v-text-muted); padding-left: 0; }

.vote {
  background: transparent;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--v-text);
  transition: border-color var(--t-base) var(--ease-snap),
              background var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
.vote:hover { border-color: var(--v-text); }
/* Σταθερά ζεύγη: Lime και Flame δεν αλλάζουν με το θέμα, άρα ούτε τα
   γράμματα πάνω τους. Λευκό ΠΟΤΕ πάνω σε Lime — ink. */
.vote.on      { background: var(--v-lime);  border-color: var(--v-lime);  color: var(--v-ink); }
.vote.on.down { background: var(--v-flame); border-color: var(--v-flame); color: var(--v-paper); }

.retry {
  background: transparent;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
  color: var(--v-text);
  border-radius: var(--r-edge);
  padding: .18rem .68rem;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-snap);
}
.retry:hover { background: var(--v-surface-2); }
.retry:disabled { opacity: .5; cursor: default; }

/* ───────────────────────────── ένδειξη αναμονής */

.thinking { display: flex; align-items: center; gap: .6rem; color: var(--v-text-muted); font-size: .92rem; }
.dots span {
  display: inline-block; width: 7px; height: 7px; margin-right: 4px;
  border-radius: var(--r-pill);
  background: var(--v-sky);
  animation: blink 1.25s linear infinite;
}
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,100% { opacity: .25; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════════════════ φόρμες */

.composer { position: sticky; bottom: 0; padding: .6rem 0 .3rem; }
.composer .row { display: flex; gap: .55rem; align-items: flex-end; }

/* ═══════════ Διακόπτης φωτεινού / σκούρου φόντου ═══════════
   Το εικονίδιο δείχνει ΤΙ ΘΑ ΓΙΝΕΙ, όχι πού είσαι:
     φωτεινό φόντο → φεγγάρι (πάτα το για σκούρο)
     σκούρο φόντο  → ήλιος   (πάτα τον για φωτεινό)
   Δίπλα μένει πάντα και το λεκτικό: το εικονίδιο δεν κουβαλάει μόνο του
   το νόημα. */
#btn-theme {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
#btn-theme svg { width: 17px; height: 17px; flex: none; }
/* ⚠️ ΜΟΝΟ ΣΥΜΒΟΛΟ, χωρίς λεκτικό (εντολή Στέφανου 02/09/2026). Το
   νόημα το κουβαλά το `aria-label`/`title` που γράφει το paintThemeButton
   — άρα οι αναγνώστες οθόνης εξακολουθούν να το ακούν. */
#btn-theme .theme-label { display: none; }
#btn-theme .ico-sun  { display: none; }
:root[data-theme="dark"] #btn-theme .ico-moon { display: none; }
:root[data-theme="dark"] #btn-theme .ico-sun  { display: block; }

/* Ο ολισθητήρας των προτάσεων: [‹] [κυλιόμενα chips] [›]
   Τα βελάκια είναι ΕΝΤΟΣ ροής (όχι από πάνω), ώστε να μην κρύβουν ποτέ
   chip, και εμφανίζονται ΜΟΝΟ όταν υπάρχει πράγματι κάτι προς τα εκεί.
   Σε αφή κρύβονται — εκεί το σύρσιμο είναι το φυσικό χειριστήριο. */
.quick-wrap { display: flex; align-items: center; gap: 6px; }
.quick-wrap .quick-row { flex: 1 1 auto; min-width: 0; }

.quick-nav {
  display: none;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v-line);
  border-radius: var(--r-pill);
  background: var(--v-surface-1);
  color: var(--v-text-muted);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-snap),
              color var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
.quick-nav.show { display: inline-flex; }
.quick-nav:hover { border-color: var(--v-sky); color: var(--v-text); }
.quick-nav:active { transform: scale(0.92); }
/* Το βελάκι σχεδιάζεται με CSS — καμία εικόνα, καμία γραμματοσειρά
   εικονιδίων, ίδιο πάχος σε κάθε ανάλυση. */
.quick-nav i {
  display: block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
#quick-prev i { transform: rotate(135deg); margin-left: 3px; }
#quick-next i { transform: rotate(-45deg); margin-right: 3px; }

/* Γρήγορες ερωτήσεις — μία κυλιόμενη γραμμή από διακριτικά chips.
   ⚠️ Η προεπιλεγμένη μπάρα κύλισης του λειτουργικού ζωγράφιζε μια ΛΕΥΚΗ
   γραμμή κατά μήκος σκούρου UI. Την κρύβουμε τελείως και δηλώνουμε την
   κύλιση με μάσκες ξεθωριάσματος στις δύο άκρες (η αριστερή ανάβει μόνο
   όταν έχει όντως κυλήσει — αλλιώς θα έσβηνε το πρώτο chip στην ηρεμία). */
.quick-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  padding: 0 0 .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.quick-row::-webkit-scrollbar { display: none; }
.quick-q {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--v-line);
  background: transparent;
  color: var(--v-text-muted);
  border-radius: var(--r-pill);
  padding: .34rem .8rem;
  font-size: .82rem;
  font-weight: var(--w-med);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-snap),
              border-color var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
.quick-q:hover { border-color: var(--v-sky); color: var(--v-text); }

textarea, input[type=text], input[type=password] {
  width: 100%;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  background: var(--v-surface-1);
  color: var(--v-text);
  transition: border-color var(--t-base) var(--ease-snap);
}
textarea { resize: vertical; min-height: 54px; max-height: 220px; }
/* Εστίαση: περίγραμμα 2px σε Sky. Καμία λάμψη, καμία χρωματιστή σκιά. */
textarea:focus, input:focus {
  outline: none;
  border-color: var(--v-sky);
  border-width: 2px;
}
::placeholder { color: var(--v-steel); }

button {
  border: 1px solid transparent;
  border-radius: var(--r-edge);
  padding: .68rem 1.2rem;
  font: inherit;
  font-size: .94rem;
  font-weight: var(--w-semi);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-snap),
              color var(--t-base) var(--ease-snap),
              border-color var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
/* Η κύρια ενέργεια είναι ΠΑΝΤΑ το αντίθετο του καμβά: μαύρο κουμπί με
   λευκά γράμματα σε φωτεινό θέμα, λευκό με μαύρα σε σκούρο. */
button.primary {
  color: var(--v-canvas);
  background: var(--v-text);
  border-color: var(--v-text);
}
button.primary:hover { background: var(--v-text-muted); border-color: var(--v-text-muted); }
button.secondary {
  background: transparent;
  color: var(--v-text);
  border-color: var(--v-line);
}
button.secondary:hover { border-color: var(--v-text); }
button.small { padding: .34rem .72rem; font-size: .84rem; font-weight: var(--w-med); }
button:disabled { opacity: .5; cursor: default; }

label {
  display: block;
  font-size: .82rem;
  color: var(--v-text-muted);
  font-weight: var(--w-semi);
  margin: .85rem 0 .3rem;
}

.hint { font-size: .83rem; color: var(--v-text-muted); margin-top: .35rem; }
.notice {
  border-radius: var(--r-edge);
  padding: .65rem .9rem;
  margin: .6rem 0;
  font-size: .9rem;
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  color: var(--v-text);
}
.notice.err { border-left: 3px solid var(--v-flame); }
.notice.ok  { border-left: 3px solid var(--v-lime); }

/* ═══════════════════════════════════════════════════ πίνακες & λίστες */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: right; padding: .6rem .65rem; border-bottom: 1px solid var(--v-line); }
th {
  color: var(--v-text-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: var(--w-bold);
}
th:first-child, td:first-child { text-align: left; }
tbody tr { transition: background var(--t-fast) var(--ease-snap); }
tbody tr:hover { background: var(--v-surface-2); }
tr.off td { opacity: .45; }

.list-item {
  display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  padding: .7rem .75rem;
  border-radius: var(--r-edge);
  border-bottom: 1px solid var(--v-line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-snap);
}
.list-item:hover  { background: var(--v-surface-2); }
.list-item:active { background: var(--v-surface-2); }
.list-item:last-child { border-bottom: none; }
/* ⚠️ Το κείμενο αριστερά ΠΡΕΠΕΙ να μπορεί να συρρικνωθεί: χωρίς
   min-width:0 ένα μεγάλο θέμα συνομιλίας σπρώχνει το «Άνοιγμα ›» έξω
   από την οθόνη και όλη η σελίδα αρχίζει να φεύγει δεξιά-αριστερά. */
.list-item > :first-child { flex: 1 1 auto; min-width: 0; }
.list-item .chip { flex: none; }
.list-item .t {
  font-weight: var(--w-semi);
  color: var(--v-text);
  font-size: .93rem;
  overflow-wrap: anywhere;
}
.list-item .d {
  font-size: .78rem;
  color: var(--v-text-muted);
  margin-top: .12rem;
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════ διορθώσεις του χημείου */

.fix-box {
  margin-top: .7rem;
  padding: .85rem;
  border-radius: var(--r-edge);
  background: var(--v-surface-2);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
}
.fix-box textarea { margin-bottom: .45rem; }
.fix-box .hint { margin-bottom: 0; }

.corr {
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .95rem;
  margin-bottom: .85rem;
  background: var(--v-canvas);
  color: var(--v-text);
}
.corr-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .65rem; }
.corr-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--v-text-muted); font-weight: var(--w-bold); margin-top: .7rem;
}
.corr summary.corr-label { cursor: pointer; }
.corr-q { font-weight: var(--w-semi); color: var(--v-text); }
.corr-old {
  background: var(--v-surface-2); border-left: 3px solid var(--v-flame);
  padding: .55rem .75rem; border-radius: 0 var(--r-edge) var(--r-edge) 0; font-size: .92rem;
}
.corr-good {
  background: var(--v-surface-2); border-left: 3px solid var(--v-lime);
  padding: .55rem .75rem; border-radius: 0 var(--r-edge) var(--r-edge) 0;
}
.corr-old p:last-child, .corr-good p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════ προφίλ χρήστη */

.profile-id { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }

.avatar {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-edge);
  font-size: 1.4rem; font-weight: var(--w-bold);
  color: var(--v-canvas);
  background: var(--v-text);
}

.profile-name { font-size: 1.15rem; font-weight: var(--w-bold); color: var(--v-text); letter-spacing: -.01em; }
.profile-sub { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
               font-size: .84rem; color: var(--v-text-muted); margin-top: .2rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .6rem;
  margin: 1rem 0 .3rem;
}
.stat {
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .8rem .85rem .7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 74px;
}
.stat-v { font-size: 1.55rem; font-weight: var(--w-bold); color: var(--v-text); line-height: 1.1; letter-spacing: -.02em; }
.stat-l {
  font-size: .66rem;
  color: var(--v-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: var(--w-semi);
  margin-top: .3rem;
  line-height: 1.3;
}
/* Η κατάσταση φαίνεται από τη γραμμή 3px — το νούμερο μένει ink, γιατί
   Lime/Amber σε λευκό δεν φτάνουν το 4,5:1. */
.stat.good { border-left: 3px solid var(--v-lime); }
.stat.bad  { border-left: 3px solid var(--v-flame); }
.stat.warn { border-left: 3px solid var(--v-amber); }

.rating {
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-line);
  border-radius: 0 var(--r-edge) var(--r-edge) 0;
  padding: .8rem .9rem;
  margin-bottom: .7rem;
  background: var(--v-canvas);
  color: var(--v-text);
}
.rating.good { border-left-color: var(--v-lime); }
.rating.bad  { border-left-color: var(--v-flame); }

.rating-top { display: flex; gap: .5rem; align-items: baseline; }
.rating-mark { font-size: 1.05rem; flex: none; }
.rating-comment {
  margin-top: .55rem; padding: .5rem .7rem;
  background: var(--v-surface-2);
  border-left: 3px solid var(--v-amber);
  border-radius: 0 var(--r-edge) var(--r-edge) 0;
  font-size: .9rem;
}
.rating-comment .corr-label { margin-top: 0; }
.rating-answer {
  background: var(--v-surface-2);
  border-radius: var(--r-edge);
  padding: .6rem .8rem;
  font-size: .92rem;
  margin-top: .4rem;
}
.rating-answer p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════ κάρτες ομάδας (πίνακας ελέγχου) */

.team-card {
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  background: var(--v-canvas);
  color: var(--v-text);
  transition: border-color var(--t-base) var(--ease-snap);
}
.team-card:hover { border-color: var(--v-text); }
.team-card.off { opacity: .55; }

.avatar.sm { width: 40px; height: 40px; font-size: 1.05rem; }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: .4rem;
  margin: .8rem 0 .5rem;
}
.mini {
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .45rem .5rem;
  text-align: center;
  background: var(--v-canvas);
}
.mini b { display: block; font-size: 1.02rem; color: var(--v-text); line-height: 1.2; }
.mini span { font-size: .71rem; color: var(--v-text-muted); }
.mini.good { border-left: 3px solid var(--v-lime); }
.mini.bad  { border-left: 3px solid var(--v-flame); }
.mini.warn { border-left: 3px solid var(--v-amber); }

/* ═══════════════════════════════════════════════════ footer */

footer {
  max-width: 940px;
  margin: 0 auto;
  padding: .4rem 1rem 2.5rem;
  font-size: .82rem;
  color: var(--v-text-faint);      /* διορθώνει την αστοχία 2,55:1 */
  text-align: center;
}
footer .sep { color: var(--v-text-faint); margin: 0 .45rem; }

/* «εσωτερική χρήση — φάση ελέγχου»: σήμα, όχι γκρι κειμενάκι. */
.badge-internal {
  display: inline-block;
  background: var(--v-sun);
  color: var(--v-ink);          /* σταθερό: γράμματα πάνω σε Sun */
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .68rem;
  font-weight: var(--w-bold);
  padding: 2px 8px;
  border-radius: var(--r-badge);
  font-family: var(--mono);
  vertical-align: middle;
}

/* Η υπόδειξη κάτω από το πεδίο ερώτησης κάθεται πάνω στον σκούρο καμβά. */
.composer .hint { color: var(--v-text-faint); }
/* «Νέα συνομιλία» = ΔΕΥΤΕΡΕΥΟΥΣΑ ενέργεια. Μόνο μία κύρια ενέργεια
   υπάρχει σε αυτή τη γραμμή, και είναι η Αποστολή. */
.composer .hint button {
  background: transparent;
  border: 1px solid var(--v-line);
  color: var(--v-text-muted);
}
.composer .hint button:hover { border-color: var(--v-text-muted); color: var(--v-text); }

/* ═══════════════════════════════════════════════════ οθόνη σύνδεσης */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: var(--v-canvas);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-sky);
  color: var(--v-text);
  position: relative;
}
/* Η σφραγίδα, με τη ζώνη προστασίας της (25% του ύψους σε κάθε πλευρά) */
.login-card .badge {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
  padding: 0;
}
/* Το λεκτικό λογότυπο έχει δική του αρχή ανά φόντο: μαύρη σε φωτεινό,
   λευκή (με τις χρωματιστές μπάρες) σε σκούρο. ΠΟΤΕ βαμμένο με CSS. */
.login-card .badge img { width: 100%; max-width: 240px; height: auto; display: block; }
.login-card .badge .wm-dark  { display: none; }
:root[data-theme="dark"] .login-card .badge .wm-light { display: none; }
:root[data-theme="dark"] .login-card .badge .wm-dark  { display: block; }
.login-card h1 {
  font-weight: var(--w-bold);
  font-size: 1.28rem; color: var(--v-text); text-align: center;
  margin: 0 0 .25rem; letter-spacing: -.02em;
}
.login-card .sub {
  text-align: center; color: var(--v-text-muted);
  font-size: .87rem; margin: 0 0 1.2rem;
}
.login-card button { width: 100%; margin-top: 1.15rem; }
.login-foot {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--v-line);
  font-size: .78rem; color: var(--v-text-muted); text-align: center;
}

/* ═══════════════════════════════════════════════════ κινητό */

@media (max-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  /* 16px είναι το δάπεδο: κάτω από αυτό το iOS κάνει zoom σε κάθε πάτημα */
  body { font-size: 16px; }
  header { padding: 10px 14px 8px; gap: .6rem; }
  header .logo-wrap { padding: 6px; }
  header img.logo { height: 24px; }
  .title { font-size: .95rem; }
  .title small { display: none; }
  #who { font-size: .74rem; }
  .nav-btn { flex: 1 1 auto; text-align: center; padding: .45rem .5rem; font-size: .82rem; }
  main { padding: .8rem .7rem 1.5rem; }
  .card, .phase { padding: .95rem; }
  .phase h1 { font-size: 1.12rem; }
  .msg.user .bubble { max-width: 92%; }
  th, td { padding: .45rem .3rem; font-size: .84rem; }

  /* ── Κάθετη χρήση σε κινητό (25/08/2026 — φάση πωλητών) ── */
  .composer textarea { font-size: 16px; }
  /* Το πλαίσιο γραφής να μην κρύβεται από τη «μπάρα»/εγκοπή του iPhone */
  .composer { padding-bottom: calc(.3rem + env(safe-area-inset-bottom)); }
  .composer .primary { min-height: 44px; padding: .55rem 1rem; }
  .quick-q { padding: .45rem .85rem; font-size: .85rem; }
  .composer .hint { font-size: 0; gap: 0; }
  .composer .hint button { font-size: .8rem; min-height: 38px; }
}

/* ══════════════════════ Πολιτική κίνησης ══════════════════════
   Κατά το design-engineering skill του Emil Kowalski:
   - ισχυρό ease-out (τα ενσωματωμένα CSS easings είναι «άτονα»)
   - καμία διάρκεια μετάβασης πάνω από 200ms
   - κάθε πατήσιμο στοιχείο «απαντά» με scale(0.97) στο :active
   - transitions σε ΣΥΓΚΕΚΡΙΜΕΝΕΣ ιδιότητες, ποτέ «all», ποτέ ease-in
   - το λογότυπο ΔΕΝ κινείται ποτέ                                    */

.primary, .secondary, .quick-q, .nav-btn, .composer .hint button {
  transition: transform var(--t-base) var(--ease-snap),
              background var(--t-base) var(--ease-snap),
              color var(--t-base) var(--ease-snap),
              border-color var(--t-base) var(--ease-snap);
}
.primary:active, .secondary:active, .quick-q:active,
.nav-btn:active, .composer .hint button:active {
  transform: scale(0.97);
}

/* ═══════════ Θέμα συνομιλίας — ΓΙΑ ΟΛΟΥΣ (body.chatui) ═══════════
   Ο καμβάς είναι επίπεδος: καμία διαβάθμιση, καμία λάμψη. Το χρώμα
   μπαίνει ΜΟΝΟ ως γραμμή κατηγορίας ή κατάστασης. */
body.chatui {
  background: var(--v-canvas);
}

/* Καμία ΛΕΥΚΗ μπάρα κύλισης πάνω σε σκούρο UI — ούτε στη συνομιλία,
   ούτε στα πάνελ, ούτε στο συρτάρι. Λεπτή, σε χρώμα γραμμής, με
   διάφανη τροχιά. */
body.chatui #thread,
body.chatui .phase,
body.chatui main > .view.active:not(#view-chat),
body.chatui #drawer {
  scrollbar-width: thin;
  scrollbar-color: var(--v-line) transparent;
}
body.chatui #thread::-webkit-scrollbar,
body.chatui .phase::-webkit-scrollbar,
body.chatui main > .view.active:not(#view-chat)::-webkit-scrollbar,
body.chatui #drawer::-webkit-scrollbar { width: 8px; height: 8px; }
body.chatui #thread::-webkit-scrollbar-track,
body.chatui .phase::-webkit-scrollbar-track,
body.chatui main > .view.active:not(#view-chat)::-webkit-scrollbar-track,
body.chatui #drawer::-webkit-scrollbar-track { background: transparent; }
body.chatui #thread::-webkit-scrollbar-thumb,
body.chatui .phase::-webkit-scrollbar-thumb,
body.chatui main > .view.active:not(#view-chat)::-webkit-scrollbar-thumb,
body.chatui #drawer::-webkit-scrollbar-thumb {
  background: var(--v-line);
  border-radius: var(--r-edge);
}

/* Το πάνελ «Φάση ελέγχου» δεν στριμώχνεται ποτέ σε κλειστή διάταξη:
   κρατά το ύψος του και κυλάει μόνο του — αλλιώς κόβονταν τα βήματα 3
   και 4 (το πάθαμε πρώτα σε κινητό, ίδια αιτία και σε υπολογιστή). */
body.chatui .phase {
  /* 0 0 auto, ΟΧΙ 0 1 auto: με shrink το πάνελ στριμωχνόταν από το
     #thread (flex:1) και κόβονταν τα βήματα 3 και 4 στη μέση. */
  flex: 0 0 auto;
  max-height: 62vh;
  overflow-x: hidden;
  overflow-y: auto;
}
body.chatui header {
  background: var(--v-canvas);
  border-bottom: 1px solid var(--v-line);
  padding: 14px 20px 10px;
  gap: 12px;
  flex: none;
}
body.chatui .title { font-size: .98rem; }
/* Ο χρήστης ως καθαρή ταμπέλα κατάστασης */
body.chatui #who {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: 5px 12px;
  font-size: .76rem;
  color: var(--v-text-muted);
}
body.chatui main { max-width: 760px; }

/* Ό,τι δεν ανήκει στον πωλητή κρύβεται ΚΑΙ από το CSS (όχι μόνο από το
   JS) — έτσι δεν προλαβαίνει να φανεί ούτε στιγμή στο refresh. */
/* ⚠️ Η ΑΠΟΣΥΝΔΕΣΗ ΞΑΝΑΜΠΗΚΕ ΣΤΗΝ ΚΕΦΑΛΙΔΑ και για τον πωλητή
   (03/09/2026, εντολή Στέφανου: «βάλε το αποσύνδεση πάνω και βγάλε
   τελείως το footer»). Πριν ζούσε ως μικρή «Έξοδος» στο υποσέλιδο —
   που πλέον δεν υπάρχει. */
body.seller #nav-corrections,
body.seller #nav-users,
body.seller .nav-btn[data-view="account"],
body.seller #btn-help,

/* Καρτέλες: επιφάνεια + γραμμή, ενεργό = υπογράμμιση Sky, χωρίς γέμισμα */
body.chatui nav {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: 0 4px;
  gap: 0;
}
body.chatui .nav-btn {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  border-radius: 0;
  min-height: 44px;
  color: var(--v-text-muted);
  font-weight: var(--w-semi);
}
body.chatui .nav-btn.active {
  background: none;
  color: var(--v-text);
  border-bottom-color: var(--v-sky);
}
body.chatui .nav-btn.nav-new { color: var(--v-sky); flex: 0 0 auto; }

/* Φούσκες */
body.chatui .msg.bot .bubble {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-radius: var(--r-bubble);
  border-bottom-left-radius: 6px;
  padding: 16px;
  color: var(--v-text);
  font-size: 1rem;          /* δάπεδο 16px για σώμα κειμένου */
  line-height: 1.68;
}
body.chatui .bubble p { margin: 0 0 .8rem; }
body.chatui .bubble p:last-child { margin-bottom: 0; }
body.chatui .msg.bot .bubble strong { color: var(--v-text); font-weight: var(--w-bold); }
body.chatui .msg.bot .bubble li::marker { color: var(--v-text-muted); }
body.chatui .stream-text { color: var(--v-text); }
body.chatui .thinking { color: var(--v-text-muted); }
body.chatui .msg.user .bubble {
  background: var(--v-text);
  color: var(--v-canvas);
  border-radius: var(--r-bubble);
  border-bottom-right-radius: 6px;
  padding: 13px 16px;
}

/* Πλαίσιο γραφής + κυκλικό «↑» */
body.chatui .composer .row { align-items: flex-end; gap: 8px; }
body.chatui .composer textarea {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  color: var(--v-text);
  border-radius: var(--r-edge);
  min-height: 50px;
  padding: 13px 16px;
  caret-color: var(--v-sky);
}
body.chatui .composer textarea::placeholder { color: var(--v-steel); }
body.chatui .composer textarea:focus {
  border-color: var(--v-sky);
  border-width: 2px;
  outline: none;
}
/* Δύο καθαρές καταστάσεις: άδειο πεδίο → σβηστό· με κείμενο → το κουμπί
   γίνεται ΟΡΑΤΑ διαθέσιμο (λευκό γέμισμα, βέλος στο χρώμα του καμβά). */
body.chatui .send-round {
  width: 50px;
  height: 50px;
  min-height: 50px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--v-text);
  background: var(--v-text);
  color: var(--v-canvas);
  font-size: 1.35rem;
  font-weight: var(--w-bold);
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.chatui .send-round:disabled {
  background: var(--v-surface-2);
  border-color: var(--v-line);
  color: var(--v-text-faint);
  opacity: 1;
}
body.chatui .send-round.sending { animation: pulseSend 1.1s linear infinite; }
@keyframes pulseSend { 50% { opacity: .55; } }
body.chatui .quick-q {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-text-muted);
  border-radius: var(--r-pill);
}
body.chatui .quick-q:hover {
  border-color: var(--v-sky);
  color: var(--v-text);
}
/* Το μεγάλο «Νέα συνομιλία» έφυγε από κάτω (πήγε στην κεφαλίδα ως ＋) */
/* Ο πωλητής ΕΧΕΙ «Νέα συνομιλία» και σε υπολογιστή (04/09/2026, εντολή
   Στέφανου). Πριν, ολόκληρη η γραμμή ήταν κρυμμένη γι' αυτόν: σε κινητό
   δεν φαινόταν γιατί το «＋ Νέα» ζει στην κεφαλίδα, αλλά σε υπολογιστή
   δεν υπήρχε ΚΑΝΕΝΑΣ τρόπος να ξεκινήσει καινούργια συνομιλία.
   ⚠️ Κρύβεται ΜΟΝΟ η υπόδειξη πληκτρολογίου, όχι το κουμπί. */
body.seller .composer .hint { display: flex; justify-content: flex-end; }
body.seller .composer .hint .kbd-hint { display: none; }

/* Ιστορικό/κάρτες στον πωλητή: σκούρη επιφάνεια με γραμμή */
body.seller .card {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  color: var(--v-text);
}
body.seller .card h2 { color: var(--v-text); }
body.seller .hint { color: var(--v-text-muted); }
body.chatui footer { color: var(--v-text-faint); }
body.chatui .footer-logout { color: var(--v-text-faint); }

/* ─── Αρχιτεκτονική οθόνης (review 25/08, P0):
   Header σταθερό πάνω · ΜΟΝΟ τα μηνύματα scrollable · composer σταθερός
   κάτω. Η σελίδα ΔΕΝ κυλάει — άρα το περιεχόμενο δεν περνάει ΠΟΤΕ πίσω
   από το composer, και το iOS keyboard δεν προκαλεί page jumping. ─── */
#app { display: contents; }

body.chatui {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.chatui #app {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding-top: env(safe-area-inset-top);
  transform-origin: top left;
  will-change: transform;
}
body.chatui main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.chatui #view-chat.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.chatui #thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 2px 16px;
  /* Μάσκα ΔΙΑΦΑΝΕΙΑΣ (όχι χρωματική διαβάθμιση): ό,τι κυλάει προς τα
     πάνω σβήνει μαλακά κάτω από τις καρτέλες. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 18px);
  mask-image: linear-gradient(180deg, transparent 0, black 18px);
}

/* Με ανοιχτό πληκτρολόγιο: ΜΟΝΟ chat + πλαίσιο γραφής — τίποτα άλλο */
body.chatui.kbd-open .quick-wrap { display: none; }
body.chatui.kbd-open footer { display: none; }
body.chatui.kbd-open .composer { padding-bottom: 10px; }
body.chatui .composer {
  position: static;
  flex: none;
  /* ⚠️ Η ζώνη ασφαλείας του iPhone (μπάρα/εγκοπή κάτω) ΠΡΕΠΕΙ να μπαίνει
     εδώ. Χωρίς αυτήν το κυκλικό «↑» κάθεται πάνω στη μπάρα και κόβεται
     από κάτω — το πάθαμε. Σε υπολογιστή το env() είναι 0, άρα μένουν
     καθαρά 12px αναπνοής. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
body.chatui .empty-state { margin: auto 0; }

/* Στην κλειδωμένη διάταξη, ΚΑΘΕ ενότητα εκτός chat (Ιστορικό κ.λπ.)
   γίνεται το δικό της scrollable area — αλλιώς κόβεται και δεν κυλάει. */
body.chatui main > .view.active:not(#view-chat) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Ασφαλιστική δικλείδα: καμία ενότητα δεν κυλάει ΠΟΤΕ οριζόντια.
     Χωρίς αυτό, το overflow-y:auto κάνει από μόνο του και τον οριζόντιο
     άξονα «auto», οπότε ένα μοναδικό στοιχείο που ξεφεύγει κουνάει όλη
     τη σελίδα δεξιά-αριστερά. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 0 24px;
}

/* Οι μάσκες ξεθωριάσματος ακολουθούν τη ΘΕΣΗ κύλισης: ξεθωριάζει μόνο
   η πλευρά που έχει όντως κρυμμένα chips. Στην αρχή δεξιά, στη μέση και
   στις δύο, στο τέλος μόνο αριστερά. Έτσι δεν σβήνει ποτέ chip χωρίς
   λόγο. Οι κλάσεις μπαίνουν από το JS (updateQuickNav). */
body.chatui .quick-row {
  padding: 2px 2px .5rem;
  -webkit-mask-image: linear-gradient(90deg, black 0, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, black 0, black calc(100% - 32px), transparent);
}
body.chatui .quick-row.scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, black 32px, black calc(100% - 32px), transparent);
}
body.chatui .quick-row.at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 32px, black 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 32px, black 100%);
}
/* Χωρίς υπερχείλιση δεν υπάρχει τίποτα να ξεθωριάσει */
body.chatui .quick-row.no-overflow {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 620px) {
  body.chatui main { padding: 8px 16px 0; max-width: none; }
  body.chatui header { padding: 10px 16px 6px; }
  body.chatui .msg.user .bubble { max-width: 92%; }
  body.chatui footer { padding: 2px 16px 4px; font-size: .68rem; flex: none; }
}

/* ─── Empty state: οι τέσσερις κάρτες εργασιών ───
   Εδώ προσγειώνεται η μάρκα. Κάθε κάρτα παίρνει γραμμή 3px στην πάνω
   ακμή, στο χρώμα της κατηγορίας της — και τίποτε άλλο δεν αλλάζει
   χρώμα. Χωρίς emoji: σε εργαλείο για χημικούς και εφαρμοστές
   υπονομεύουν το κύρος· οι τέσσερις ετικέτες στέκονται μόνες τους. */
.empty-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 12px 4px;
}
.empty-state h2 {
  font-size: 1.35rem;
  font-weight: var(--w-bold);
  color: var(--v-text);
  margin: 0;
  letter-spacing: -.01em;
}
.empty-sub {
  color: var(--v-text-muted);
  font-size: .88rem;
  margin: 0 0 10px;
}
.empty-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.empty-cat {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--card-accent);
  border-radius: var(--r-edge);
  padding: 20px 12px;
  color: var(--v-text);
  font-weight: var(--w-semi);
  font-size: .92rem;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-snap),
              border-color var(--t-base) var(--ease-snap);
}
/* Χωρίς σκιά, χωρίς ανύψωση, χωρίς λάμψη, χωρίς μεγέθυνση. */
.empty-cat:hover {
  background: var(--v-surface-2);
  border-color: var(--v-line-hover);
  border-top-color: var(--card-accent);
}

.empty-cat--wall    { --card-accent: var(--v-sky);   }
.empty-cat--product { --card-accent: var(--v-amber); }
.empty-cat--problem { --card-accent: var(--v-flame); }
.empty-cat--calc    { --card-accent: var(--v-lime);  }

/* ─── «↓ Μετάβαση στην απάντηση» ─── */
.jump-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  color: var(--v-text);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: .82rem;
  font-weight: var(--w-semi);
  font-family: inherit;
  cursor: pointer;
  /* ⚠️ ΟΧΙ το κοινό «rise»: εκείνο κινεί το transform και, με fill-mode
     both, κρατάει για πάντα το τελικό «transform: none» — έσβηνε το
     translateX(-50%) και το κουμπί καθόταν μισό πλάτος δεξιά από το
     κέντρο. Εδώ κινείται ΜΟΝΟ η διαφάνεια, ώστε το transform να μένει
     ελεύθερο για το κεντράρισμα και για το :active. */
  animation: jumpIn 200ms var(--ease-snap) both;
}
@keyframes jumpIn { from { opacity: 0; } to { opacity: 1; } }
.jump-bottom.show { display: block; }
.jump-bottom:active { transform: translateX(-50%) scale(0.97); }

/* ─── Ετικέτες κάτω από την απάντηση (πηγή, σήματα, διόρθωση) ───
   Είναι το εργαλείο ελέγχου των χημικών και κάθονται πάνω στον ΣΚΟΥΡΟ
   καμβά — όχι μέσα σε λευκή κάρτα. Χωρίς αυτό το μπλοκ κληρονομούσαν
   τα χρώματα λευκής επιφάνειας και γίνονταν αδιάβαστες. */
body.chatui #thread .meta { color: var(--v-text-muted); }
body.chatui #thread .chip {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-text-muted);
}
body.chatui #thread .chip.plain    { border-color: transparent; }
body.chatui #thread .chip.flag     { border-left: 3px solid var(--v-amber); }
body.chatui #thread .chip.approved { border-left: 3px solid var(--v-lime); }
body.chatui #thread .chip.rejected { border-left: 3px solid var(--v-flame); }
body.chatui #thread .retry {
  border-color: var(--v-line);
  border-left-color: var(--v-amber);
  color: var(--v-text-muted);
}
body.chatui #thread .retry:hover { background: var(--v-surface-2); color: var(--v-text); }
body.chatui #thread .fix-box {
  background: var(--v-surface-1);
  border-color: var(--v-line);
  border-left-color: var(--v-sky);
  color: var(--v-text);
}
body.chatui #thread .fix-box .hint,
body.chatui #thread .fix-box label { color: var(--v-text-muted); }
body.chatui #thread .fix-box textarea,
body.chatui #thread .fix-box input {
  background: var(--v-surface-2);
  border: 1px solid var(--v-line);
  color: var(--v-text);
}
body.chatui #thread .fix-box textarea::placeholder,
body.chatui #thread .fix-box input::placeholder { color: var(--v-steel); }

/* ─── Feedback 👍/👎 ─── */
.feedback-q { font-size: .8rem; color: inherit; opacity: .75; margin-right: 2px; }
body.chatui .vote {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-text);
}
body.chatui .vote:hover { border-color: var(--v-text-muted); }
body.chatui .vote.on      { background: var(--v-lime);  border-color: var(--v-lime);  color: var(--v-ink); }
body.chatui .vote.on.down { background: var(--v-flame); border-color: var(--v-flame); color: var(--v-paper); }
body.chatui .feedback-q { color: var(--v-text-muted); opacity: 1; }

/* Chips carousel: «κούμπωμα» στη θέση κάθε chip */
body.chatui .quick-row { scroll-snap-type: x proximity; }
body.chatui .quick-q { scroll-snap-align: start; }

/* Το λογότυπο είναι κλικαμπλ — γυρνά στην αρχική. ΔΕΝ κινείται ποτέ. */
#logo-home { cursor: pointer; position: relative; }
/* Αόρατη επέκταση της περιοχής αφής: η σφραγίδα «πιάνεται» σαν 50px
   χωρίς να αλλάζει οπτικά τίποτα (στόχοι αφής ≥44px για δάχτυλα). */
#logo-home::after { content: ''; position: absolute; inset: -8px; }

/* Διακριτική «Έξοδος» στο υποσέλιδο (μόνο πωλητές) */
.footer-logout {
  background: none;
  border: 0;
  color: var(--v-text-faint);
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
  margin-left: .6rem;
  padding: 2px 4px;
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════
   Πίνακας ομάδας — επικεφαλίδες, νούμερα, φίλτρα
   ════════════════════════════════════════════════════════════════════ */

.card h2, #hist-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: var(--w-bold);
  color: var(--v-text-muted);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--v-line);
}

.card label { font-size: .8rem; font-weight: var(--w-semi); color: var(--v-text-muted); }

/* Νούμερα παντού σε στήλη: ίδιο πλάτος ψηφίων */
table, .stat-v, .chip, .list-item .d, .stats { font-variant-numeric: tabular-nums; }

/* Ομάδες φίλτρων: segmented control */
.corr-filter, .sort-btn, .hist-scope {
  border-radius: var(--r-edge);
  border: 1px solid var(--v-line);
  background: transparent;
  color: var(--v-text-muted);
  font-weight: var(--w-semi);
  font-size: .78rem;
  padding: .34rem .7rem;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap),
              border-color var(--t-fast) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
.corr-filter:hover, .sort-btn:hover, .hist-scope:hover { border-color: var(--v-text); color: var(--v-text); }
.corr-filter.active, .sort-btn.active, .hist-scope.active {
  background: var(--v-text);
  border-color: var(--v-text);
  color: var(--v-canvas);
}
.corr-filter:active, .sort-btn:active, .hist-scope:active { transform: scale(0.97); }

/* Εστίαση πληκτρολογίου: ορατή σε ΚΑΘΕ διαδραστικό στοιχείο.
   Sky σε σκούρο (8,4:1)· μέσα σε λευκές κάρτες γίνεται ink, γιατί το
   Sky σε λευκό πέφτει στο 2,0:1. */
:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

/* Άδεια «κουτάκια» πριν τα γεμίσει το JS: η ταμπέλα χρήστη και το
   υποσέλιδο γράφονται από το /api/me. Χωρίς αυτό εμφανίζονται για λίγο
   ως κενά πλαίσια. */
#who:empty { display: none; }
footer:empty { display: none; }

/* Ιστορικό στο θέμα πωλητή */
body.seller .list-item { border-bottom-color: var(--v-line); }
body.seller .list-item:hover { background: var(--v-surface-2); }
body.seller .list-item .t { color: var(--v-text); }
body.seller .list-item .d { color: var(--v-text-muted); }
body.seller .chip {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-text-muted);
}
body.seller .chip.flag     { border-left: 3px solid var(--v-amber); }
body.seller .chip.approved { border-left: 3px solid var(--v-lime); }
body.seller .chip.rejected { border-left: 3px solid var(--v-flame); }
body.seller .card h2, body.seller #hist-title {
  color: var(--v-text-muted);
  border-bottom-color: var(--v-line);
}

/* Το πεδίο της σωστής απάντησης: ο χημικός γράφει ΤΕΧΝΙΚΟ κείμενο, όχι
   μια γραμμή. Στα 5 rows δεν χωρούσε και ήταν δύσχρηστο. */
.fix-answer {
  min-height: 260px;
  max-height: 60vh;
  line-height: 1.6;
  resize: vertical;
}
@media (max-width: 620px) {
  .fix-answer { min-height: 200px; }
}

/* Πίνακας ρόλων στη λίστα χρηστών — αντικατέστησε αλυσίδα από
   παράθυρα «OK = ναι, Άκυρο = όχι» που ήταν αδύνατο να διαβαστεί. */
.roles-box {
  margin-top: .7rem;
  padding: .8rem .9rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
}
.roles-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-weight: 400;
  font-size: .9rem;
}
.roles-row input { width: auto; margin-top: .2rem; flex: none; }
.roles-hint { color: var(--v-text-muted); font-size: .82rem; }
.roles-actions { display: flex; gap: 8px; margin-top: .7rem; }

/* Η συνομιλία μέσα στην καρτέλα του αιτήματος — ό,τι ακριβώς θα σταλεί
   στον πελάτη, ώστε ο υπάλληλος να το βλέπει πριν πατήσει αποστολή. */
.ticket-thread {
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  overflow: hidden;
}
.ticket-turn { padding: .75rem .95rem; border-bottom: 1px solid var(--v-line); }
.ticket-turn:last-child { border-bottom: none; }
.ticket-turn.q { background: var(--v-surface-1); }
.ticket-turn-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--w-bold);
  color: var(--v-text-muted);
  margin-bottom: .3rem;
}
.ticket-turn-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Ουρά ελέγχου: το σχόλιο του συναδέλφου πρέπει να διαβάζεται με μια
   ματιά — είναι ο λόγος που ο χημικός ανοίγει τη συνομιλία. */
.review-comment {
  margin-top: .45rem;
  padding: .5rem .7rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  font-size: .88rem;
  overflow-wrap: anywhere;
}
.review-comment-label {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--w-bold);
  color: var(--v-text-muted);
  margin-bottom: .2rem;
}
#review-card h2 .nav-badge { vertical-align: middle; }

/* ═══════════ First Level Support — αιτήματα (tickets) ═══════════ */

/* Η φόρμα πελάτη είναι ΚΡΥΦΗ από το CSS και ανοίγει με κλάση από το JS —
   ποτέ το αντίστροφο (αλλιώς αναβοσβήνει σε κάθε refresh). */
#cust-form { display: none; }
#cust-form.show { display: block; }

/* Μαζεμένη φόρμα πελάτη: μένει μία λωρίδα με τον τίτλο, το ποιον αφορά
   και τον διακόπτη. ⚠️ Κρύβουμε το ΣΩΜΑ (#cust-body), ΠΟΤΕ ολόκληρη τη
   φόρμα — αλλιώς ο υπάλληλος δεν βλέπει ότι υπάρχουν καταχωρημένα
   στοιχεία και τα ξαναγράφει. */
.cust-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Ο τίτλος παίρνει τον ελεύθερο χώρο, ώστε η πλακέτα να πέφτει ΔΕΞΙΑ,
   ακριβώς δίπλα στο βελάκι (εντολή Στέφανου 02/09/2026). */
.cust-head > h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* ⚠️ ΓΕΜΙΣΜΑ, ΟΧΙ ΧΡΩΜΑΤΙΣΤΟ ΚΕΙΜΕΝΟ. Μετρημένο: το Lime ως κείμενο σε
   φωτεινό φόντο δίνει 1,67:1 (αόρατο) και το Flame 4,42:1 / 3,82:1 σε
   σκούρο — και τα δύο κάτω από το όριο, και το φωτεινό είναι η
   προεπιλογή. Ως γέμισμα περνάνε άνετα: λευκά σε Flame 4,88:1, ink σε
   Lime 9,42:1 — ακριβώς οι δύο συνδυασμοί που επιτρέπει το εγχειρίδιο. */
.cust-summary {
  flex: 0 1 auto;
  max-width: 55%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--r-pill);
  padding: .18rem .6rem;
  font-size: .8rem;
  font-weight: var(--w-semi);
  background: var(--v-lime);
  color: var(--v-ink);
}

.cust-summary.empty {
  background: var(--v-flame);
  color: var(--v-paper);
}

/* Κενή γραμμή: μη ζωγραφίζεις άδεια πλακέτα. */
.cust-summary:empty { display: none; }

.cust-toggle {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: transparent;
  color: var(--v-text-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap),
              border-color var(--t-fast) var(--ease-snap);
}

.cust-toggle:hover {
  background: var(--v-surface-2);
  border-color: var(--v-line-hover);
  color: var(--v-text);
}

.cust-toggle:active { transform: scale(.97); }

.cust-toggle:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

/* Ποιο βέλος φαίνεται: κλειστή → κάτω (θα ανοίξει), ανοιχτή → πάνω
   (θα μαζευτεί). Δείχνει ΤΙ ΘΑ ΓΙΝΕΙ, όπως ο διακόπτης θέματος. */
.cust-toggle .ic-down { display: none; }
#cust-form.collapsed .cust-toggle .ic-up { display: none; }
#cust-form.collapsed .cust-toggle .ic-down { display: block; }

#cust-form.collapsed #cust-body { display: none; }
#cust-form.collapsed { padding-top: .7rem; padding-bottom: .7rem; }

/* Σε κινητό η σειρά δεν χωράει: με απλό flex-wrap έσπαγε σε ΤΡΕΙΣ
   γραμμές (τίτλος / περίληψη / κουμπί). Με grid ο τίτλος και ο διακόπτης
   μοιράζονται την πρώτη γραμμή και η περίληψη πέφτει από κάτω. */
@media (max-width: 620px) {
  .cust-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .3rem .6rem;
  }
  .cust-head > h2   { grid-column: 1; grid-row: 1; }
  .cust-toggle      { grid-column: 2; grid-row: 1; margin-left: 0; }
  /* Σε 375px δεν χωράει δίπλα στον τίτλο — πέφτει από κάτω, αλλά μένει
     στοιχισμένη δεξιά ώστε να διαβάζεται μαζί με το βελάκι. */
  .cust-summary     { grid-column: 1 / -1; grid-row: 2; justify-self: end;
                      max-width: 100%; }
}
.cust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 14px;
}
.cust-grid label { margin-top: .6rem; }
.cust-grid select {
  width: 100%;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  background: var(--v-surface-1);
  color: var(--v-text);
}

/* Μετρητής ανοιχτών αιτημάτων πάνω στην καρτέλα πλοήγησης.
   ⚠️ Η ορατότητα ελέγχεται ΜΟΝΟ με την κλάση .show — ΠΟΤΕ με το
   attribute [hidden]: ο κανόνας [hidden] του browser έχει μικρότερη
   ειδικότητα από επιλογέα κλάσης και τον νικάει το display εδώ.
   Το πάθαμε ήδη με το φόντο του συρταριού (27/08). */
.nav-badge {
  display: none;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--v-flame);
  color: var(--v-paper);        /* λευκό σε Flame — επιτρεπτό ζεύγος */
  font-size: .68rem;
  font-weight: var(--w-bold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-badge.show { display: inline-block; }

/* Σειρά αιτήματος: ο αριθμός σε mono ώστε να διαβάζεται στο τηλέφωνο */
.tick-no {
  font-family: var(--mono);
  font-weight: var(--w-semi);
  letter-spacing: .02em;
}
/* Κατάσταση με ΛΕΚΤΙΚΟ + γραμμή — το χρώμα δεν στέκεται ποτέ μόνο του */
.chip.st-open     { border-left: 3px solid var(--v-amber); }
.chip.st-answered { border-left: 3px solid var(--v-lime); }
.chip.st-closed   { border-left: 3px solid var(--v-line-hover); }

.ticket-card { margin-top: 1rem; }
.ticket-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: .6rem 0 1rem;
}
.ticket-fact {
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  padding: .55rem .7rem;
}
.ticket-fact .k {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--w-bold);
  color: var(--v-text-muted);
}
.ticket-fact .v { font-size: .93rem; overflow-wrap: anywhere; }
.ticket-answer {
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-lime);
  border-radius: var(--r-edge);
  padding: .8rem .95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ticket-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .9rem; }
.ticket-actions button { flex: none; }

/* ═══════════ Προσωρινός κωδικός παράδοσης (σελίδα «Χρήστες») ═══════════
   Φαίνεται ΜΟΝΟ σε διαχειριστή και ΜΟΝΟ όσο ο χρήστης δεν έχει βάλει δικό
   του κωδικό. Sun = «θέλει ενέργεια», όχι σφάλμα. */
.temp-pass {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding: 10px 12px;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sun);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
}
.temp-pass.warn { border-left-color: var(--v-amber); }
.temp-pass-body { flex: 1 1 200px; min-width: 0; }
.temp-pass-title {
  font-size: .68rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--v-text-muted);
  margin-bottom: 4px;
}
.temp-pass-code {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: var(--w-semi);
  letter-spacing: .04em;
  color: var(--v-text);
  overflow-wrap: anywhere;
  user-select: all;              /* ένα κλικ επιλέγει ΟΛΟΚΛΗΡΟ τον κωδικό */
}
.temp-pass button { flex: none; }

/* ═══════════ Αξιολόγηση: ορατό σχόλιο + ευδιάκριτο ευχαριστώ ═══════════ */

.fb-thanks {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-lime);
  color: var(--v-text);
  font-weight: var(--w-bold);
  font-size: .92rem;
  letter-spacing: .01em;
}
.fb-thanks.pop { animation: fbPop 200ms var(--ease-snap) both; }
@keyframes fbPop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Το σχόλιο του χρήστη — μένει ορατό στη συνομιλία ΚΑΙ στο Ιστορικό */
.fb-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
}
.fb-note-ico { font-size: 1rem; line-height: 1.4; flex: none; }
.fb-note-title {
  font-size: .68rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--v-text-muted);
  margin-bottom: 2px;
}
.fb-note-text { font-size: .9rem; color: var(--v-text); line-height: 1.55; }

/* Το κουτί καταχώρησης σχολίου */
.comment-box { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.comment-box input { flex: 1 1 240px; min-height: 42px; }
.comment-box button { min-height: 42px; white-space: nowrap; }

/* ── Σκούρο θέμα: ίδια λογική, αναγνώσιμα χρώματα ── */
body.chatui .fb-thanks {
  background: var(--v-surface-1);
  border-color: var(--v-line);
  border-left-color: var(--v-lime);
  color: var(--v-text);
}
body.chatui .fb-note {
  background: var(--v-surface-1);
  border-color: var(--v-line);
  border-left-color: var(--v-amber);
}
body.chatui .fb-note-title { color: var(--v-text-muted); }
body.chatui .fb-note-text { color: var(--v-text); }
body.chatui .comment-box .secondary,
body.chatui .fix-box .secondary {
  background: transparent;
  border: 1px solid var(--v-line);
  color: var(--v-text-muted);
}
body.chatui .comment-box .secondary:hover,
body.chatui .fix-box .secondary:hover {
  border-color: var(--v-text-muted);
  color: var(--v-text);
}
body.chatui .comment-box input {
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  color: var(--v-text);
  border-radius: var(--r-edge);
}
body.chatui .comment-box input::placeholder { color: var(--v-steel); }

/* ═══════════ Βελτιστοποίηση για οθόνη κινητού ═══════════ */
@media (max-width: 620px) {
  body.chatui header { row-gap: 6px; column-gap: 8px; padding: 10px 12px 6px; }
  body.chatui .title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.chatui #who {
    flex: 0 0 auto;
    max-width: 46%;
    padding: 4px 9px;
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.chatui #who .dot { flex: none; }   /* να μη «στριμώχνεται» η κουκκίδα */

  body.chatui header .logo-wrap { padding: 5px; }
  body.chatui header img.logo { height: 22px; }
  body.chatui nav { padding: 0 2px; gap: 0; }
  body.chatui .nav-btn { min-height: 42px; font-size: .84rem; padding: .3rem .5rem; }

  body.chatui #thread { gap: 12px; padding: 22px 2px 12px; }
  body.chatui .msg.bot .bubble { padding: 14px; line-height: 1.62; }
  body.chatui .msg.user .bubble { padding: 11px 14px; }

  body.chatui .quick-row { padding: 0 2px 6px; }
  .quick-nav.show { display: none; }   /* σε κινητό σέρνεις */
  body.chatui .quick-q { padding: .34rem .7rem; font-size: .8rem; }
  body.chatui .composer {
    padding: 4px 0 calc(12px + env(safe-area-inset-bottom));
  }
  body.chatui .composer textarea { min-height: 46px; padding: 11px 14px; }
  body.chatui .send-round { width: 46px; height: 46px; min-height: 46px; font-size: 1.25rem; }

  .comment-box input { flex: 1 1 100%; }
  .comment-box button { flex: 1 1 45%; }
  .fb-thanks { padding: 9px 12px; font-size: .88rem; }
  .fb-note { padding: 10px 12px; }

  /* Ιστορικό σε κινητό: ο τίτλος παίρνει ΟΛΟ το πλάτος και οι ετικέτες
     (χρήστης, «Άνοιγμα ›») κατεβαίνουν από κάτω. Αλλιώς μοιράζονται τη
     γραμμή και ο τίτλος σπάει σε στήλη 5 γραμμάτων. */
  .list-item { flex-wrap: wrap; row-gap: 8px; }
  .list-item > :first-child { flex: 1 1 100%; }
}

/* ═══════════════ ΣΥΡΤΑΡΙ ΠΛΟΗΓΗΣΗΣ (κινητό) ═══════════════
   Σε κινητό: καρτέλες + ταυτότητα χρήστη + αποσύνδεση φεύγουν από την
   οθόνη του chat και μπαίνουν σε πλαϊνό μενού. Σε υπολογιστή: τίποτα
   δεν αλλάζει (η πλοήγηση επιστρέφει στην κεφαλίδα). */

#btn-menu, #btn-new-top { display: none; }        /* μόνο σε κινητό */
#drawer { display: none; }
/* ⚠️ Το φόντο του μενού ΔΕΝ πιάνει ΠΟΤΕ πατήματα όσο είναι κλειστό —
   ελέγχεται ΜΟΝΟ με opacity + pointer-events, ποτέ με [hidden]. */
#drawer-scrim { display: none; opacity: 0; pointer-events: none; }

.icon-btn {
  appearance: none;
  border: 1px solid var(--v-line);
  background: transparent;
  border-radius: var(--r-edge);
  width: 42px; height: 42px;
  flex: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t-base) var(--ease-snap),
              transform var(--t-base) var(--ease-snap);
}
.icon-btn:active { transform: scale(0.94); }
/* «χάμπουργκερ» από καθαρό CSS — καμία εξωτερική εικόνα */
.burger, .burger::before, .burger::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--v-text);
  border-radius: var(--r-edge);
  transition: transform var(--t-slow) var(--ease-snap),
              opacity var(--t-base) var(--ease-snap);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after  { top: 6px; }
body.drawer-open .burger { background: transparent; }
body.drawer-open .burger::before { transform: translateY(6px) rotate(45deg); }
body.drawer-open .burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* «＋ Νέα»: η ΜΟΝΗ κύρια ενέργεια της κεφαλίδας σε κινητό */
.new-top {
  appearance: none;
  border: 1px solid var(--v-text);
  border-radius: var(--r-edge);
  background: var(--v-text);
  color: var(--v-canvas);
  font-family: inherit;
  font-weight: var(--w-bold);
  font-size: .92rem;
  padding: 0 16px;
  min-height: 42px;
  flex: none;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-snap),
              background var(--t-base) var(--ease-snap);
}
.new-top:active { transform: scale(0.96); }

@media (max-width: 620px) {
  #btn-menu, #btn-new-top { display: grid; }
  #btn-new-top { display: inline-flex; align-items: center; }
  #drawer { display: flex; }
  #drawer-scrim { display: block; }

  /* Κεφαλίδα κινητού: [☰] [σφραγίδα] [τίτλος] [＋ Νέα] — μία γραμμή */
  body.chatui header { flex-wrap: nowrap; gap: 8px; padding: 9px 10px; }

  /* ⚠️ Οι καρτέλες μετακομίζουν στο συρτάρι με JS (placeNav). Μέχρι να
     τρέξει το app.js μένουν μέσα στην κεφαλίδα και — σε στενή, nowrap
     γραμμή — στοιβάζονται σε μια ΚΑΘΕΤΗ στήλη στη μέση της οθόνης. Αυτό
     ήταν το «κάτι που εμφανίζεται από πίσω» σε κάθε refresh. Όσο είναι
     στην κεφαλίδα, σε κινητό δεν φαίνονται· μόλις μπουν στο #drawer ο
     επιλογέας δεν ταιριάζει πια και εμφανίζονται κανονικά. */
  body.chatui header > nav { display: none; }
  body.chatui #who { display: none; }        /* το όνομα ζει στο μενού */
  body.chatui .title { font-size: .9rem; }

  #drawer-scrim {
    position: fixed; inset: 0; z-index: 55;
    /* ΠΑΝΤΑ ink: σε φωτεινό θέμα ένα λευκό σκίαστρο δεν σκιάζει τίποτα */
    background: var(--v-scrim);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-snap);
  }
  body.drawer-open #drawer-scrim { opacity: 1; pointer-events: auto; }

  #drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: 84%; max-width: 320px;
    flex-direction: column;
    padding: calc(14px + env(safe-area-inset-top)) 14px
             calc(14px + env(safe-area-inset-bottom));
    background: var(--v-surface-1);
    border-right: 1px solid var(--v-line);
    transform: translateX(-102%);
    transition: transform var(--t-slow) var(--ease-snap);
    overflow-y: auto;
  }
  body.drawer-open #drawer { transform: none; }

  .drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 4px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--v-line);
  }
  .drawer-avatar {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-edge);
    display: grid; place-items: center;
    background: var(--v-surface-2);
    border: 1px solid var(--v-line);
    color: var(--v-text); font-weight: var(--w-bold); font-size: .95rem;
    letter-spacing: .02em;
  }
  .drawer-name { color: var(--v-text); font-weight: var(--w-bold); font-size: .98rem; line-height: 1.25; }
  .drawer-role {
    color: var(--v-text-muted); font-size: .72rem; font-weight: var(--w-semi);
    text-transform: uppercase; letter-spacing: .07em; margin-top: 2px;
  }

  /* Οι καρτέλες γίνονται κάθετη λίστα μέσα στο μενού */
  #drawer nav { flex-direction: column; width: 100%; gap: 4px; background: none;
                border: 0; padding: 0; }
  #drawer .nav-btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    min-height: 48px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    font-size: .95rem;
    padding: .5rem .85rem;
    background: transparent;
    color: var(--v-text-muted);
  }
  #drawer .nav-btn.active {
    background: var(--v-surface-2);
    border-left-color: var(--v-sky);
    color: var(--v-text);
  }
  #drawer .nav-btn.danger { color: var(--v-text-muted); margin-left: 0; }
  #drawer .nav-btn.danger:hover { color: var(--v-flame); }

  /* Ο διακόπτης θέματος κατεβαίνει ΑΚΡΙΒΩΣ πάνω από τη γραμμή της
     Αποσύνδεσης, στοιχισμένος αριστερά (εντολή Στέφανου 02/09/2026).
     Για να τον σπρώξει το «margin-top: auto», ολόκληρη η αλυσίδα
     #drawer-nav → nav πρέπει να είναι flex στήλη που ΜΕΓΑΛΩΝΕΙ —
     αλλιώς δεν υπάρχει κενός χώρος να απορροφήσει. */
  #drawer .drawer-nav { flex: 1; min-height: 0; display: flex; }
  #drawer nav { flex: 1; }
  #drawer #btn-theme {
    margin-top: auto;
    width: 48px;
    justify-content: flex-start;
    padding-left: .85rem;
  }

  .drawer-foot { margin-top: auto; padding-top: 14px;
                 border-top: 1px solid var(--v-line); }
  .drawer-logout {
    width: 100%;
    min-height: 46px;
    border-radius: var(--r-edge);
    border: 1px solid var(--v-line);
    background: transparent;
    color: var(--v-text-muted);
    font-family: inherit; font-weight: var(--w-semi); font-size: .92rem;
    cursor: pointer;
  }
  .drawer-logout:hover { color: var(--v-flame); border-color: var(--v-flame); }

  /* «Φάση ελέγχου» σε κινητό: τα 4 βήματα γίνονται ΚΥΛΙΟΜΕΝΕΣ κάρτες
     (πριν: 2 σειρές που κόβονταν — φαινόταν μόνο το 1 και το 2), και το
     πάνελ δεν στριμώχνεται αλλά κυλάει κατακόρυφα αν χρειαστεί. */
  body.chatui .phase {
    flex: 0 0 auto;
    max-height: 62vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1rem 1.1rem;
  }
  body.chatui .phase h1 { font-size: 1.1rem; }
  body.chatui .steps {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, black 0, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, black 0, black calc(100% - 28px), transparent);
  }
  body.chatui .steps::-webkit-scrollbar { display: none; }
  body.chatui .step {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  /* Σε κινητό η αποσύνδεση ζει στο συρτάρι — όχι διπλή στην κεφαλίδα. */
  body.chatui #btn-logout, body.chatui .footer-logout { display: none !important; }
  body.chatui .composer .hint { display: none; }   /* «Νέα» είναι πλέον πάνω */
}

/* ═══════════ Δείγμα απόχρωσης — απαράβατο σε ΚΑΘΕ θέμα ═══════════
   Κάθε απόχρωση, κάρτα χρωματολογίου και σύγκριση χρωμάτων προϊόντων
   εμφανίζεται μέσα σε ΛΕΥΚΗ κάρτα με ≥24px λευκό περιθώριο γύρω από το
   δείγμα, ανεξάρτητα από το θέμα. Το λευκό δεν είναι διακόσμηση —
   είναι το πεδίο αναφοράς που κάνει την απόχρωση αναγνώσιμη. Κάθε
   δείγμα φέρει το όνομα και τον κωδικό του. */
.swatch-card {
  background: var(--v-paper);      /* ΠΑΝΤΑ λευκό — πεδίο αναφοράς */
  padding: 24px;
  border-radius: var(--r-edge);
  border: 1px solid var(--v-hairline);
  color: var(--v-ink);
}
.swatch-card .swatch {
  display: block;
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--v-hairline);
  /* ΚΑΜΙΑ μετάβαση στο background δείγματος: το μάτι δεν πρέπει να δει
     ποτέ ενδιάμεση, ψεύτικη απόχρωση. */
  transition: none;
}
.swatch-card .name { font-weight: var(--w-bold); margin-top: 16px; }
.swatch-card .code {
  font-family: var(--mono);
  color: var(--v-ink);
  font-size: .84rem;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ουρά ελέγχου μέσα στα Αιτήματα: το «👍 Ήταν σωστή» δεν συρρικνώνεται
   ούτε σπάει σε δύο γραμμές — είναι ενέργεια, όχι κείμενο. Σε κινητό η
   σειρά σπάει ούτως ή άλλως (flex-wrap του .list-item) και πέφτει κάτω. */
.review-done {
  flex: none;
  white-space: nowrap;
}

/* Η κάρτα «κάποιος σημείωσε λάθος απάντηση» ξεχωρίζει από τα αιτήματα
   του FLS με γραμμή Amber στην αριστερή ακμή — άλλο είδος δουλειάς.
   Το χρώμα ΔΕΝ κουβαλάει μόνο του το νόημα (κανόνας 8): δίπλα του
   στέκει πάντα το λεκτικό «σημειώθηκε με 👎 από …». */
.review-item {
  border-left: 3px solid var(--v-amber);
}

/* Ελεγμένο και εντάξει: Lime, το χρώμα της υγιούς κατάστασης. Το λεκτικό
   «👍 κρίθηκε σωστή» στέκει δίπλα — το χρώμα δεν λέει τίποτα μόνο του. */
.review-item.ok {
  border-left-color: var(--v-lime);
}

/* Η ανοιχτή καρτέλα αιτήματος κλείνει — αλλιώς έμενε για πάντα κάτω
   από τη λίστα και ο χημικός δεν ήξερε αν κοιτάει παλιό ή νέο. */
.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.ticket-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: transparent;
  color: var(--v-text-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap),
              border-color var(--t-fast) var(--ease-snap);
}

.ticket-close:hover {
  background: var(--v-surface-2);
  border-color: var(--v-line-hover);
  color: var(--v-text);
}

.ticket-close:active { transform: scale(.94); }

.ticket-close:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

/* «Πού είναι τι» — μικρός χάρτης της εφαρμογής στην πληροφοριακή σελίδα.
   Δύο στήλες σε υπολογιστή, μία σε κινητό· το κείμενο πρέπει να μπορεί
   να συρρικνωθεί (min-width: 0), αλλιώς σπρώχνει τη σειρά εκτός οθόνης. */
.about-map {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .6rem 0 1rem;
}

.about-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-top: 1px solid var(--v-line);
}

.about-row:first-child { border-top: none; }

.about-row > b {
  font-weight: var(--w-semi);
  color: var(--v-text);
}

.about-row > span {
  min-width: 0;
  color: var(--v-text-muted);
  line-height: 1.55;
}

@media (max-width: 620px) {
  .about-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ── Μπάρα ενεργειών στο τέλος της συνομιλίας ────────────────────────
   Ζει μέσα στο #thread, μετά το τελευταίο μήνυμα. Δεν είναι μήνυμα —
   είναι το «τι κάνω τώρα», γι' αυτό έχει δικό της πλαίσιο και γραμμή
   Sky (το ΜΟΝΟ χρώμα αλληλεπίδρασης). */
.conv-actions {
  margin: 1.2rem 0 .4rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-sky);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
}

.conv-actions-note {
  margin: 0 0 .7rem;
  color: var(--v-text-muted);
  font-size: .95rem;
  line-height: 1.55;
}

.conv-actions:last-child > .conv-actions-note:last-child { margin-bottom: 0; }

.conv-actions button { width: 100%; }

/* Πρόχειρο αίτημα: δεν έχει φύγει ακόμα από τα χέρια του υπαλλήλου. */
.chip.st-draft {
  background: var(--v-surface-2);
  color: var(--v-text-muted);
  border: 1px solid var(--v-line);
}

/* ── Διακόπτης τομέα: οικοδομικά ↔ επιπλοποιία ───────────────────────
   Δύο καταστάσεις, μία ενεργή. Το ενεργό παίρνει το «αντίθετο του
   καμβά» γέμισμα — ίδια γλώσσα με τα υπόλοιπα κύρια στοιχεία, χωρίς
   έκτο χρώμα. Κλειδωμένος (μέσα σε συνομιλία) γίνεται απλή ένδειξη. */
.domain-switch {
  display: flex;
  gap: .3rem;
  margin: 0 0 .5rem;
  padding: .2rem;
  border: 1px solid var(--v-line);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}

.dom-btn {
  flex: none;
  padding: .3rem .85rem;
  font-size: .9rem;
  font-weight: var(--w-med);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--v-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap);
}

.dom-btn:hover { color: var(--v-text); }
.dom-btn:active { transform: scale(.97); }

.dom-btn.active {
  background: var(--v-text);
  color: var(--v-canvas);
}

.dom-btn:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

/* Μέσα σε συνομιλία ο τομέας δεν αλλάζει — δείχνουμε μόνο ποιος είναι. */
.domain-switch.locked { border-color: transparent; padding-left: 0; }
.domain-switch.locked .dom-btn:not(.active) { display: none; }
.domain-switch.locked .dom-btn.active {
  background: var(--v-surface-1);
  color: var(--v-text-muted);
  cursor: default;
}

/* Υπόδειξη «αυτό μοιάζει με επιπλοποιία» κάτω από την απάντηση. */
.dom-hint {
  margin: .5rem 0 0;
  padding: .7rem .9rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
  color: var(--v-text-muted);
  font-size: .95rem;
}

.dom-hint button { margin-top: .5rem; }

/* ── Συνεννόηση μέσα στο case ────────────────────────────────────────
   Δύο πλευρές, οπτικά ξεχωριστές: το χημείο αριστερά με γραμμή Sky,
   ο συνάδελφος του δρόμου με γραμμή Lime. Το χρώμα δεν λέει τίποτα
   μόνο του — δίπλα στέκεται πάντα η ετικέτα ρόλου. */
.case-notes { margin-top: 1rem; }

.case-note {
  margin: .5rem 0;
  padding: .6rem .8rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-line);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
}

.case-note.from-lab   { border-left-color: var(--v-sky); }
.case-note.from-field { border-left-color: var(--v-lime); }

.case-note-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}

.case-note-time {
  margin-left: auto;
  color: var(--v-text-faint);
  font-size: .85rem;
}

.case-note-text {
  color: var(--v-text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.case-note-input {
  width: 100%;
  margin: .6rem 0 .4rem;
  min-height: 84px;
}

/* ── Αυτόματη συμπλήρωση καταστήματος ────────────────────────────────
   Η λίστα κρέμεται ΚΑΤΩ από το πεδίο, μέσα σε σχετικό γονέα — αλλιώς
   σε κινητό θα έβγαινε εκτός οθόνης. Πάνω από όλα, γιατί η φόρμα έχει
   δικό της φόντο. */
.ac-wrap { position: relative; }

.ac-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--v-line-hover);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
}

.ac-item {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  border: none;
  border-bottom: 1px solid var(--v-line);
  background: transparent;
  color: var(--v-text);
  text-align: left;
  font-size: .95rem;
  cursor: pointer;
}

.ac-item:last-child { border-bottom: none; }
.ac-item.ac-empty { color: var(--v-text-muted); font-size: .85rem; cursor: default; }
.ac-item:hover,
.ac-item.on { background: var(--v-surface-1); }

.ac-item .ac-sub {
  display: block;
  margin-top: .1rem;
  color: var(--v-text-faint);
  font-size: .82rem;
}

/* Το κατάστημα ΕΠΙΒΕΒΑΙΩΘΗΚΕ από τον κατάλογο — μικρή, ήσυχη ένδειξη.
   Γραμμή Lime = «σωστό», με λεκτικό δίπλα (το χρώμα δεν λέει μόνο του). */
.ac-ok {
  display: inline-block;
  margin-top: .25rem;
  padding: .1rem .4rem;
  border-left: 3px solid var(--v-lime);
  color: var(--v-text-muted);
  font-size: .82rem;
}

/* ── Support Dashboard ───────────────────────────────────────────────
   Η καρτέλα πελάτη και το ιστορικό του. Πλαίσια, όχι πίνακες: ο
   υπάλληλος διαβάζει «τι του είπαμε», δεν συγκρίνει στήλες. */
.cust-card {
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-sky);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
}

.cust-card h2 { margin: 0 0 .2rem; border: none; padding: 0; }

.cust-hist {
  padding: .8rem .9rem;
  margin: .5rem 0;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
}

.cust-hist button { margin-top: .6rem; }

/* Το «λύθηκε;» ανοίγει κάτω από το κουμπί, δεν διακόπτει με παράθυρο. */
.outcome-box {
  flex-basis: 100%;
  margin-top: .7rem;
  padding: .8rem .9rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-lime);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
}

.outcome-box .hint { margin: 0 0 .6rem; }

.outcome-row {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   SUPPORT DASHBOARD — γλώσσα σχεδίασης Credit Control Cockpit
   (εντολή Στέφανου 02/09/2026: «πάρε παραδείγματα από το credit
   control dashboard»). Μεταφέρθηκαν οι ΑΡΧΕΣ, όχι τα χρώματα: εκεί
   υπάρχουν δικά του tokens, εδώ ισχύει το tokens.css της VERNILAC.

   Τι δανείζεται: μικρή ΚΕΦΑΛΑΙΑ αραιή ετικέτα πάνω από μεγάλο αριθμό ·
   hero κάρτα για το σημαντικότερο · τετράγωνη κουκκίδα πριν τον τίτλο
   ενότητας · λωρίδα κατάστασης αριστερά στις γραμμές εργασίας ·
   tabular-nums ώστε οι αριθμοί να στοιχίζονται κάθετα.
   ══════════════════════════════════════════════════════════════════ */

.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dash-title {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.7rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--v-text);
}

.dash-when {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-text-faint);
}

/* ── KPI ───────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
  margin-bottom: 1.1rem;
}

/* Τέσσερις σταθερές σειρές: ετικέτα · αριθμός · κατάσταση · επεξήγηση.
   Το `1fr` στην τελευταία κρατά την επεξήγηση κολλημένη κάτω, ώστε οι
   κάρτες να διαβάζονται σαν πίνακας και όχι σαν σκάλα. */
.kpi {
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-text);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
}

/* Η hero παίρνει το ΜΟΝΟ χρώμα αλληλεπίδρασης και διπλό πλάτος:
   είναι αυτό που θέλει ενέργεια τώρα. */
.kpi.hero {
  grid-column: span 2;
  border-top-width: 6px;
  border-top-color: var(--v-sky);
  /* Η γραμμή είναι 3px παχύτερη — χωρίς αντιστάθμιση ΟΛΟ το περιεχόμενο
     της hero κάθεται 3px πιο κάτω από των υπολοίπων. */
  padding-top: calc(.9rem - 3px);
}

@media (max-width: 640px) { .kpi.hero { grid-column: auto; } }

/* Δύο γραμμές ύψος: ένας τίτλος που τυλίγεται («Έτοιμα να σταλούν στον
   πελάτη») δεν πρέπει να σπρώχνει τον αριθμό του πιο κάτω από τους άλλους. */
.kpi .t {
  min-height: 2.8em;
  font-size: .66rem;
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--v-text-muted);
}

.kpi .v {
  margin: .45rem 0 .2rem;
  font-size: 1.9rem;
  font-weight: var(--w-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}

/* ⚠️ Η hero ΔΕΝ έχει μεγαλύτερο αριθμό: θα χαλούσε την ευθυγράμμιση των
   σειρών. Ξεχωρίζει από τη γραμμή Sky 6px και το διπλό πλάτος. */
.kpi.hero .v { font-size: 1.9rem; }

.kpi .sub {
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--v-text-faint);
}

/* Μικρή ένδειξη κατάστασης. Γραμμή αριστερά αντί για γέμισμα — το
   λεκτικό στέκεται πάντα δίπλα (κανόνας 8: το χρώμα δεν λέει μόνο του). */
/* ⚠️ ΣΤΑΘΕΡΟ ύψος, όχι min-height: η σειρά «auto» του grid μετριέται ΑΝΑ
   ΚΑΡΤΑ, οπότε μια κάρτα με ετικέτα έσπρωχνε την επεξήγησή της πιο κάτω
   από της διπλανής. */
.kpi .d {
  display: inline-block;
  justify-self: start;
  box-sizing: border-box;
  height: 1.45rem;
  line-height: 1.3rem;
  margin-top: .3rem;
  padding: .05rem .4rem;
  border-left: 3px solid var(--v-line-hover);
  font-size: .76rem;
  font-weight: var(--w-med);
  color: var(--v-text-muted);
}

.kpi .d.good { border-left-color: var(--v-lime); }
.kpi .d.warn { border-left-color: var(--v-amber); }
.kpi .d.bad  { border-left-color: var(--v-flame); }

/* ── Τίτλος ενότητας με τετράγωνη κουκκίδα ─────────────────────── */
.dash-h {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.3rem 0 .6rem;
  font-size: .74rem;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v-text-muted);
}

.dash-h::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--v-text);
}

.dash-h.is-send::before  { background: var(--v-lime); }
.dash-h.is-stale::before { background: var(--v-flame); }
.dash-h.is-wait::before  { background: var(--v-sky); }
.dash-h.is-info::before  { background: var(--v-amber); }

.dash-h .n {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--v-text-faint);
}

/* ── Γραμμή εργασίας ───────────────────────────────────────────── */
.wl {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  margin-bottom: .35rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-line-hover);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-snap),
              background var(--t-fast) var(--ease-snap);
}

.wl:hover { border-color: var(--v-line-hover); background: var(--v-surface-2); }
.wl:active { transform: scale(.995); }
.wl.is-send  { border-left-color: var(--v-lime); }
.wl.is-stale { border-left-color: var(--v-flame); }
.wl.is-wait  { border-left-color: var(--v-sky); }
.wl.is-info  { border-left-color: var(--v-amber); }

.wl-main { flex: 1 1 auto; min-width: 0; }

.wl-no {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--v-text-faint);
}

.wl-t {
  display: block;
  margin: .1rem 0 .15rem;
  font-weight: var(--w-med);
  color: var(--v-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-m {
  font-size: .8rem;
  color: var(--v-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-age {
  flex: none;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--v-text-muted);
  text-align: right;
}

.wl-go { flex: none; color: var(--v-text-faint); }

@media (max-width: 620px) {
  .wl { flex-wrap: wrap; }
  .wl-age { margin-left: auto; }
  .wl-t, .wl-m { white-space: normal; }
}
/* 16/09 ι — ΤΑΜΠΛΕΤΑ: τα .wl-t / .wl-m είναι inline spans, οπότε το text-overflow: ellipsis ΔΕΝ πιάνει και το κείμενο
   ξέφευγε δεξιά από τη λίστα (Διαχείριση → «Τι δεν καλύπτεται»). Σε στενή στήλη τυλίγονται αντί να ξεφεύγουν. */
@media (min-width: 621px) and (max-width: 1000px) { .wl-t, .wl-m { white-space: normal; } }

/* ── Δύο στήλες ────────────────────────────────────────────────── */
/* ⚠️ minmax(0, 1fr) και ΟΧΙ σκέτο 1fr: το 1fr είναι minmax(auto, 1fr),
   οπότε μια γραμμή με nowrap φουσκώνει τη στήλη — η μία έγινε 1089px και
   η άλλη 223px. Το πάθαμε. */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }

/* Στο Support η ουρά εργασίας διαβάζεται, η αναζήτηση απλώς πληκτρολογείται
   — 3:2 αντί για 1:1. */
#view-support .two-col { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) { #view-support .two-col { grid-template-columns: 1fr; } }

.dash-empty {
  padding: 1.1rem;
  border: 1px dashed var(--v-line);
  border-radius: var(--r-edge);
  color: var(--v-text-faint);
  font-size: .9rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   ΠΛΑΤΟΣ ΣΕ ΥΠΟΛΟΓΙΣΤΗ — ΣΤΟ ΤΕΛΟΣ ΤΟΥ ΑΡΧΕΙΟΥ, ΕΠΙΤΗΔΕΣ

   Εντολή Στέφανου 02/09/2026: «το παράθυρο να γεμίζει, σαν το Claude
   στον υπολογιστή» και «ΑΛΛΟ το desktop, ΑΛΛΟ το mobile — μην πειράξεις
   το κινητό». Γι' αυτό ΟΛΑ εδώ είναι μέσα σε min-width: 621px· κάτω από
   αυτό δεν αλλάζει τίποτα.

   ⚠️ Γιατί στο ΤΕΛΟΣ: το `body.chatui main { max-width: 760px }` ορίζεται
   στη μέση του αρχείου. Ίδια ειδικότητα σημαίνει ότι κερδίζει ό,τι
   γράφτηκε ΤΕΛΕΥΤΑΙΟ — η υπερίσχυση από πάνω αγνοούνταν σιωπηλά.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 621px) {
  main,
  body.chatui main { max-width: 1500px; padding: 1.2rem 1.5rem 2rem; }
  footer { max-width: 1500px; padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Μόνο η συνομιλία κρατά αναγνώσιμο μέτρο — κεντραρισμένη μέσα στο
     πλήρες πλάτος, όχι στριμωγμένη αριστερά. */
  body.chatui #view-chat > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ΔΙΑΚΟΠΤΗΣ ΘΕΜΑΤΟΣ — ΚΑΤΩ ΔΕΞΙΑ, ΜΟΝΟ ΣΕ ΥΠΟΛΟΓΙΣΤΗ
   (εντολή Στέφανου 02/09/2026). Στο κινητό μένει ΑΚΡΙΒΩΣ όπου ήταν
   — μέσα στο συρτάρι, μαζί με τις υπόλοιπες καρτέλες — απλώς χωρίς
   λεκτικό. Γι' αυτό όλα εδώ είναι σε min-width: 621px.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 621px) {
  #btn-theme {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 60;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--v-line);
    border-radius: var(--r-pill);
    background: var(--v-surface-1);
    color: var(--v-text-muted);
    box-shadow: none;
  }

  #btn-theme:hover {
    background: var(--v-surface-2);
    border-color: var(--v-line-hover);
    color: var(--v-text);
  }

  #btn-theme:active { transform: scale(.94); }

  #btn-theme:focus-visible {
    outline: 2px solid var(--v-focus);
    outline-offset: 2px;
  }

  /* Δεν συμμετέχει πια στη σειρά της πλοήγησης: η υπογράμμιση του
     ενεργού tab δεν το αφορά. */
  #btn-theme::after { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   ΑΙΤΗΜΑΤΑ — πατήσιμη γραμμή, βελάκι, καρτέλα που ανοίγει ΕΠΙ ΤΟΠΟΥ
   (εντολή Στέφανου 02/09/2026). Πριν: κουμπί «Άνοιγμα ›» και καρτέλα στο
   τέλος της σελίδας, οπότε κάθε ανανέωση πετούσε τον χημικό κάτω.
   ══════════════════════════════════════════════════════════════════════ */

#tickets-list .list-item[role="button"],
#cases-list   .list-item[role="button"] {
  cursor: pointer;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-snap);
}
#tickets-list .list-item[role="button"]:hover,
#cases-list   .list-item[role="button"]:hover { background: var(--v-surface-2); }
#tickets-list .list-item[role="button"]:focus-visible,
#cases-list   .list-item[role="button"]:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: -2px;
}

/* Η ανοιχτή γραμμή: γραμμή Sky αριστερά — δένει οπτικά με την καρτέλα
   που ξεδιπλώνεται από κάτω της. */
#tickets-list .list-item.is-open,
#cases-list   .list-item.is-open {
  background: var(--v-surface-2);
  box-shadow: inset 3px 0 0 var(--v-sky);
}

.row-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--v-text-faint);
  transition: transform var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap);
}
.row-arrow svg { width: 18px; height: 18px; display: block; }
.list-item:hover .row-arrow { color: var(--v-text); }
/* Ανοιχτή γραμμή → το βελάκι δείχνει κάτω, δηλαδή «αυτό ξεδιπλώθηκε». */
.list-item.is-open .row-arrow { transform: rotate(90deg); color: var(--v-text); }

/* ── Η κατάσταση: κουκκίδα + λεκτικό ──────────────────────────────────
   Το χρώμα ΔΕΝ κουβαλάει μόνο του νόημα (κανόνας 8) — η κουκκίδα είναι
   ενίσχυση της λέξης, ποτέ αντικατάστασή της. */
.chip.st-draft, .chip.st-open, .chip.st-answered, .chip.st-closed {
  border-left-width: 1px;
  padding-left: .55rem;
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .06em;
  font-weight: var(--w-semi);
}
.chip.st-draft::before, .chip.st-open::before,
.chip.st-answered::before, .chip.st-closed::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 0;
  flex: none;
}
.chip.st-draft    { border-left: 1px solid var(--v-line); }
.chip.st-draft::before    { background: var(--v-text-faint); }
.chip.st-open     { border-left: 1px solid var(--v-line); }
.chip.st-open::before     { background: var(--v-amber); }
.chip.st-answered { border-left: 1px solid var(--v-line); }
.chip.st-answered::before { background: var(--v-lime); }
.chip.st-closed   { border-left: 1px solid var(--v-line); }
.chip.st-closed::before   { background: transparent; box-shadow: inset 0 0 0 1.5px var(--v-text-faint); }
.chip.st-closed   { color: var(--v-text-muted); }

/* Η καρτέλα ξεδιπλώνεται μέσα στη λίστα: μικρή εσοχή ώστε να φαίνεται
   ότι ανήκει στη γραμμή από πάνω της. */
#ticket-detail:not(:empty), #case-detail:not(:empty) {
  margin: 0 0 .75rem;
  animation: unfold var(--t-base) var(--ease-snap) both;
}
#ticket-detail .ticket-card, #case-detail .ticket-card {
  border-left: 3px solid var(--v-sky);
  border-radius: 0;
}
@keyframes unfold { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  #ticket-detail:not(:empty), #case-detail:not(:empty) { animation: none; }
  .row-arrow { transition: none; }
}


/* Άδεια ετικέτα κατάστασης: κρατά τη θέση της χωρίς να ζωγραφίζει τίποτα. */
.kpi .d.empty { border-left-color: transparent; }


/* ── Κοντινότερα συνεργαζόμενα καταστήματα (02/09/2026) ──────────────
   Πληροφοριακό, όχι ενέργεια — γι' αυτό ουδέτερη επιφάνεια και γραμμή
   Sky μόνο στην κεφαλίδα του. */
.near-shops {
  margin-top: .9rem;
  border: 1px solid var(--v-line);
  border-radius: 0;
  background: var(--v-canvas);
}
.near-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--v-line);
  box-shadow: inset 3px 0 0 var(--v-sky);
}
.near-title {
  font-size: .66rem;
  font-weight: var(--w-semi);
  letter-spacing: .12em;
  color: var(--v-text-muted);
}
.near-sub { font-size: .78rem; color: var(--v-text-faint); }

.near-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem .8rem;
  border-top: 1px solid var(--v-line);
}
.near-item:first-of-type { border-top: none; }
/* Κάθε flex σειρά με κείμενο θέλει min-width: 0 στο μέρος που
   συρρικνώνεται — αλλιώς ένα μακρύ όνομα σπρώχνει τα χλμ εκτός οθόνης. */
.near-item > :first-child { flex: 1 1 auto; min-width: 0; }
.near-name  { font-weight: var(--w-semi); font-size: .9rem; overflow-wrap: anywhere; }
.near-where { font-size: .78rem; color: var(--v-text-muted); overflow-wrap: anywhere; }
.near-tel   { font-size: .78rem; color: var(--v-text-faint); font-variant-numeric: tabular-nums; }
.near-km {
  flex: none;
  font-size: .78rem;
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  color: var(--v-text-muted);
}



/* Ο διαχειριστής βλέπει ΔΕΚΑ καρτέλες. Με padding .9rem χρειάζονταν
   1.478px σε 1.400 διαθέσιμα και η «Αποσύνδεση» έπεφτε σε τρίτη γραμμή.
   ⚠️ Μόνο σε υπολογιστή — σε κινητό η πλοήγηση ζει στο συρτάρι και δεν
   πρέπει να στριμωχτεί. */
@media (min-width: 621px) {
  header > nav .nav-btn { padding-left: .62rem; padding-right: .62rem; }
}


/* ── ΔΙΑΧΕΙΡΙΣΗ: ένας πίνακας που ταξινομείται ──────────────────────── */

.mg-tbl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .5rem;
}
#mg-q {
  flex: 0 1 260px;
  min-width: 0;
  margin: 0;
  padding: .4rem .6rem;
  font-size: .85rem;
}

/* ⚠️ Ο πίνακας κυλάει ΜΕΣΑ στο κουτί του, ποτέ ολόκληρη η σελίδα. */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll table { min-width: 780px; }

.mg-th { cursor: pointer; user-select: none; white-space: nowrap; }
.mg-th:hover { color: var(--v-text); }
.mg-th.on { color: var(--v-text); }
.mg-arrow { font-size: .8em; }

.mg-role  { color: var(--v-text-muted); font-size: .82rem; white-space: nowrap; }
.mg-ago   { color: var(--v-text-muted); font-size: .82rem; white-space: nowrap; }
.mg-time  { font-weight: var(--w-semi); white-space: nowrap; }
/* Το μηδέν δεν πρέπει να τραβάει το μάτι όσο ένας πραγματικός αριθμός. */
.mg-zero  { color: var(--v-text-faint); }

/* Ο μετρητής της γραμμής «θέλει ενέργεια»: ο αριθμός πρώτος, μεγάλος. */
.mg-todo-n {
  flex: none;
  min-width: 2.2rem;
  font-size: 1.45rem;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}


/* ── Ευστοχία ανά τομέα (02/09/2026) ─────────────────────────────────
   ⚠️ minmax(0, 1fr) και ΟΧΙ σκέτο 1fr: μια μεγάλη επεξήγηση θα φούσκωνε
   τη στήλη της και οι δύο τομείς θα έβγαιναν άνισοι. */
.acc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
@media (max-width: 640px) { .acc-row { grid-template-columns: minmax(0, 1fr); } }

.acc {
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-line-hover);
  border-radius: var(--r-edge);
  background: var(--v-canvas);
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-items: start;
}
/* Οι δύο τομείς κρατούν τα χρώματα που ήδη τους αντιστοιχούν αλλού στην
   εφαρμογή — καμία νέα απόχρωση. */
.acc.is-build { border-top-color: var(--v-sky); }
.acc.is-furn  { border-top-color: var(--v-amber); }

.acc-t {
  font-size: .66rem;
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v-text-muted);
}
.acc-v {
  margin: .35rem 0 .5rem;
  font-size: 2.2rem;
  font-weight: var(--w-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.acc-bar {
  height: 8px;
  border-radius: 0;
  background: var(--v-surface-2);
  overflow: hidden;
}
.acc-bar > span {
  display: block;
  height: 100%;
  background: var(--v-lime);
}

.acc-note {
  margin-top: .45rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--v-text-faint);
}

.acc-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--v-line);
}
.acc-d-v {
  font-size: 1rem;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.acc-d-k {
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-text-faint);
  overflow-wrap: anywhere;
}


/* ── 🔴 Η ΦΟΡΜΑ ΠΕΛΑΤΗ ΔΕΝ ΠΝΙΓΕΙ ΤΗΝ ΟΘΟΝΗ (03/09/2026) ─────────────
   Ο Στέφανος: «στους πωλητές μόλις βάλω περιοχή πελάτη, η σελίδα δεν
   κατεβαίνει προς τα κάτω». Αναπαράχθηκε: με τα 5 κοντινά καταστήματα η
   φόρμα έφτανε 1.469px σε οθόνη 812px — και επειδή στο chat layout η
   ΣΕΛΙΔΑ ΕΙΝΑΙ ΚΛΕΙΔΩΜΕΝΗ (`overflow:hidden`, κυλάει μόνο το #thread),
   ο composer κατέληγε στα 1.767px, εκτός οθόνης, χωρίς κανέναν τρόπο να
   φτάσεις εκεί.
   Λύση: κυλάει το ΣΩΜΑ της φόρμας, με την κεφαλίδα καρφωμένη ώστε να
   μπορείς πάντα να τη μαζέψεις. Ο composer μένει στη θέση του. */
/* ⚠️ ΜΟΝΟ με `.show`. Χωρίς αυτό, το `display: flex` εδώ νικούσε το
   `#cust-form { display: none }` και ο πωλητής έβλεπε ΑΔΕΙΑ φόρμα
   πελάτη στα οικοδομικά, όπου δεν πρέπει να υπάρχει καθόλου. */
body.chatui #view-chat.active > #cust-form.show {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Το ΟΡΙΟ ύψους ορίζεται πιο κάτω, μαζί με το ελάχιστο του #thread —
     τα δύο πρέπει να συμφωνούν, αλλιώς φεύγει ο composer εκτός οθόνης. */
}
body.chatui #view-chat.active > #cust-form.show > .cust-head { flex: none; }
body.chatui #view-chat.active > #cust-form.show > #cust-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Μαζεμένη φόρμα: κανένα όριο — είναι μία λωρίδα. */
body.chatui #view-chat.active > #cust-form.show.collapsed { max-height: none; }

/* Και το ίδιο το πλαίσιο των καταστημάτων δεν ξεπερνά μισή οθόνη, ώστε
   να μη χρειάζεται ατέλειωτη κύλιση για να φτάσεις στα πεδία από κάτω. */
#near-shops {
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* ── ΔΙΑΧΕΙΡΙΣΗ ΑΙΤΗΜΑΤΩΝ: ένας διακόπτης, δύο πανό (03/09/2026) ──────
   Ίδιο λεξιλόγιο με τον διακόπτη τομέα του composer — ο χρήστης έχει
   ήδη μάθει αυτό το σχήμα. */
.req-switch {
  display: flex;
  gap: .3rem;
  margin: 0 0 1rem;
  padding: .25rem;
  border: 1px solid var(--v-line);
  border-radius: var(--r-pill);
  background: var(--v-surface-1);
  width: max-content;
  max-width: 100%;
}
.req-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--v-text-muted);
  font: inherit;
  font-size: .88rem;
  font-weight: var(--w-med);
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap);
}
.req-tab:hover { color: var(--v-text); }
.req-tab:active { transform: scale(.97); }
/* Το ενεργό παίρνει το ΑΝΤΙΘΕΤΟ του καμβά — μαύρο σε φως, λευκό σε
   σκοτάδι — ακριβώς όπως ο διακόπτης τομέα. */
.req-tab.active {
  background: var(--v-text);
  color: var(--v-canvas);
  font-weight: var(--w-semi);
}
.req-tab .nav-badge { position: static; transform: none; }
.req-tab.active .nav-badge { background: var(--v-canvas); color: var(--v-text); }

@media (max-width: 1000px) {   /* 16/09 ι: και σε ΤΑΜΠΛΕΤΑ — το μενού των 248px αφήνει ~470px και οι 4 καρτέλες ξέφευγαν το ίδιο */
  .req-switch { width: 100%; overflow-x: auto; scrollbar-width: none; }   /* 16/09: με 4 καρτέλες (χημικός/διαχειριστής) ξέφευγαν δεξιά — κυλάει πλάγια */
  .req-switch::-webkit-scrollbar { display: none; }
  .req-tab { flex: 1 0 auto; justify-content: center; padding: .45rem .6rem; white-space: nowrap; }
}


/* ── ΠΛΗΡΗΣ ΟΘΟΝΗ ΓΙΑ ΤΑ ΣΤΟΙΧΕΙΑ ΠΕΛΑΤΗ, ΣΕ ΚΙΝΗΤΟ (03/09/2026) ─────
   Ο Στέφανος: «στο κινητό, στους πωλητές, όταν ανοίγουν τα στοιχεία
   πελάτη να πιάνει όλη τη σελίδα — τώρα κόβεται». Με το όριο 40vh τα
   πεδία ήταν στριμωγμένα σε ένα παραθυράκι· εδώ η φόρμα γίνεται φύλλο
   πλήρους οθόνης, με την κεφαλίδα πάνω, τα πεδία να κυλάνε, και το
   «Έτοιμο» καρφωμένο κάτω. Πατώντας το, μαζεύεται και συνεχίζεις στην
   ερώτηση. ⚠️ ΜΟΝΟ κινητό + ΜΟΝΟ πωλητής: ο υπολογιστής και οι άλλοι
   ρόλοι δεν αγγίζονται.

   🔴 ΤΟ `.show` ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ ΣΕ ΚΑΘΕ ΕΠΙΛΟΓΕΑ ΕΔΩ (04/09/2026).
   Χωρίς αυτό, σε ΝΕΑ φόρτωση η φόρμα δεν έχει ούτε `.show` ούτε
   `.collapsed`, άρα το `:not(.collapsed)` έπιανε και το `display: flex`
   νικούσε το `#cust-form { display: none }`: ο πωλητής άνοιγε τον
   βοηθό σε ΚΙΝΗΤΟ, στα ΟΙΚΟΔΟΜΙΚΑ, και έβλεπε φύλλο στοιχείων πελάτη
   σε όλη την οθόνη — όπου δεν πρέπει καν να υπάρχει. */
.cust-done { display: none; }

@media (max-width: 620px) {
  body.seller.chatui #view-chat.active > #cust-form.show:not(.collapsed) {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    border: 0;
    border-radius: 0;
    max-height: none;
    background: var(--v-canvas);
    display: flex;
    flex-direction: column;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  body.seller.chatui #view-chat.active > #cust-form.show:not(.collapsed) > .cust-head {
    flex: none;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--v-line);
  }
  body.seller.chatui #view-chat.active > #cust-form.show:not(.collapsed) > #cust-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: .6rem;
  }
  /* Μέσα στο φύλλο δεν χρειάζεται δεύτερη κύλιση: μία και καλή. */
  body.seller.chatui #view-chat.active > #cust-form.show:not(.collapsed) #near-shops {
    max-height: none;
    overflow: visible;
  }
  body.seller.chatui #view-chat.active > #cust-form.show:not(.collapsed) > .cust-done {
    display: block;
    flex: none;
    width: 100%;
    margin-top: .8rem;
    padding: .85rem 1rem;
    font-size: 1rem;
  }
}


/* ── ΔΙΑΧΕΙΡΙΣΗ ΓΝΩΣΗΣ (03/09/2026) ──────────────────────────────────
   Η κάρτα καταχώρησης αλλάζει όψη ανάλογα με τον τομέα: στην
   επιπλοποιία η γνώση ΠΕΡΙΜΕΝΕΙ, και πρέπει να φαίνεται με μια ματιά. */
#kn-add-card { border-left: 3px solid var(--v-lime); }
#kn-add-card.kn-waiting { border-left-color: var(--v-amber); }
#kn-a { min-height: 180px; }
#kn-switch { margin-bottom: 1rem; }

/* Από πού ήρθε η γνώση — μικρή ετικέτα πάνω στην κάρτα. */
.kn-origin {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--v-line);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v-text-muted);
}


/* ── 🔴 ΤΟ CHATBOX ΕΙΧΕ ΜΙΚΡΥΝΕΙ (03/09/2026) ────────────────────────
   Ο Στέφανος: «μεγάλωσε το chatbox, έχει μικρύνει, δεν φαίνονται οι
   απαντήσεις». Αιτία: η φόρμα πελάτη έπαιρνε έως 40vh και το #thread
   έμενε με ό,τι περίσσευε — μετρήθηκε στα 92px σε υπολογιστή.
   Λύση: το #thread παίρνει ΕΛΑΧΙΣΤΟ ύψος και η φόρμα συρρικνώνεται
   πρώτη (κυλάει ήδη εσωτερικά). Η συνομιλία έχει πάντα προτεραιότητα. */
/* ── Η ΟΘΟΝΗ ΑΛΛΑΖΕΙ ΑΝΑΛΟΓΑ ΜΕ ΤΟ ΤΙ ΚΑΝΕΙΣ (03/09/2026) ───────────
   Ο Στέφανος: «να ανοίγει μεγάλο όταν συμπληρώνει τα στοιχεία και να
   γίνεται μικρό όταν θέλει να γράψει ερώτηση, και αντίστοιχα να
   μεγαλώνει η ερώτηση».

   Δεν είναι δύο σταθερά μεγέθη — είναι ΔΥΟ ΚΑΤΑΣΤΑΣΕΙΣ:
     · φόρμα ΑΝΟΙΧΤΗ  → αυτή παίρνει τον χώρο, η συνομιλία υποχωρεί
     · φόρμα ΜΑΖΕΜΕΝΗ → η συνομιλία παίρνει τον χώρο
   Ο διακόπτης είναι η κλάση `.collapsed` και ο επιλογέας αδελφού `~`. */

/* ⚠️ Η ΦΟΡΜΑ ΦΑΙΝΕΤΑΙ ΜΟΝΟ ΜΕ ΤΗΝ ΚΛΑΣΗ `.show` (FLS και πωλητής σε
   επιπλοποιία). Χωρίς το `.show` στον επιλογέα, ο κανόνας «φόρμα
   ανοιχτή» έπιανε και σε ΔΙΑΧΕΙΡΙΣΤΗ/ΧΗΜΙΚΟ — που δεν έχουν καθόλου
   φόρμα — και τους άφηνε συνομιλία 145px. */

/* ΑΝΟΙΧΤΗ: μεγάλη, με δική της κύλιση. Η συνομιλία δίνει τη θέση της. */
body.chatui #view-chat.active > #cust-form.show:not(.collapsed) { max-height: 62vh; }
body.chatui #view-chat.active > #cust-form.show:not(.collapsed) ~ #thread {
  min-height: 90px;
}

/* ΜΑΖΕΜΕΝΗ, ή ΚΑΘΟΛΟΥ φόρμα: όλος ο χώρος στη συνομιλία. */
body.chatui #view-chat.active > #cust-form.collapsed { max-height: none; }
body.chatui #view-chat.active > #thread { min-height: 300px; }

@media (max-width: 620px) {
  body.chatui #view-chat.active > #cust-form.show:not(.collapsed) ~ #thread {
    min-height: 0;
  }
  body.chatui #view-chat.active > #thread { min-height: 200px; }
}

/* Η μπάρα ενεργειών του αιτήματος κάθεται ΑΝΑΜΕΣΑ στη συνομιλία και το
   πλαίσιο γραφής (03/09/2026) — πάντα στο τέλος, ποτέ ανάμεσα στα
   μηνύματα. Συμπαγής, ώστε να μην τρώει χώρο από τη συνομιλία. */
#conv-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin: 0 0 .5rem;
  padding: .6rem .8rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
  border-radius: 0;
  background: var(--v-surface-1);
}
#conv-actions .conv-actions-note {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--v-text-muted);
}
#conv-actions button { flex: none; width: auto; margin: 0; }


/* ── ΤΟ ΥΠΟΣΕΛΙΔΟ ΦΕΥΓΕΙ ΤΕΛΕΙΩΣ (03/09/2026, εντολή Στέφανου) ────────
   «βγάλε τελείως το footer για να χωράνε άνετα, να μεγαλώσει το
   παράθυρο επικοινωνίας με τον βοηθό σε όλους τους χρήστες».
   Κερδίζονται ~69px ύψους σε κάθε ρόλο. Ό,τι έγραφε (έκδοση δεδομένων,
   «εσωτερική χρήση») ήταν εσωτερική πληροφορία — δεν χάνεται τίποτα
   λειτουργικό. ⚠️ Η ΑΠΟΣΥΝΔΕΣΗ μετακόμισε στην κεφαλίδα για ΟΛΟΥΣ. */
footer, #footer { display: none !important; }

/* Ο κερδισμένος χώρος πάει ΟΛΟΣ στη συνομιλία. ⚠️ Ο κανόνας της
   ανοιχτής φόρμας γράφεται ΜΕΤΑ, ώστε να κερδίζει όταν όντως ανοίξει. */
body.chatui #view-chat.active > #thread { min-height: 380px; }
body.chatui #view-chat.active > #cust-form.show:not(.collapsed) ~ #thread { min-height: 90px; }
@media (max-width: 620px) {
  body.chatui #view-chat.active > #thread { min-height: 260px; }
  body.chatui #view-chat.active > #cust-form.show:not(.collapsed) ~ #thread { min-height: 0; }
}
/* 🔴 ANDROID (15/09/2026, Στέφανος: «κρύβει το πληκτρολόγιο το κείμενο που γράφω»). Στο Android Chrome το
   παράθυρο ΜΙΚΡΑΙΝΕΙ όταν ανοίγει το πληκτρολόγιο (interactive-widget=resizes-content) — μένουν ~350-480px.
   Κεφαλίδα 69 + συνομιλία 260 (ελάχιστο) + πλαίσιο γραφής 152 = 481px > 420: το πλαίσιο έπεφτε ΚΑΤΩ από το
   πληκτρολόγιο. Στο iPhone το παράθυρο δεν μικραίνει (το #app «κουμπώνει» με JS), γι' αυτό δεν φαινόταν.
   Σε κοντό παράθυρο η συνομιλία ΔΕΝ έχει ελάχιστο ύψος — ο χώρος πάει στο πλαίσιο γραφής. */
@media (max-height: 600px) {
  body.chatui #view-chat.active > #thread { min-height: 0; }
  body.chatui #view-chat.active > #cust-form.show:not(.collapsed) ~ #thread { min-height: 0; }
}


/* ── ΤΟ ΣΥΡΤΑΡΙ ΤΟΥ ΠΩΛΗΤΗ ΠΙΟ ΜΑΖΕΜΕΝΟ (03/09/2026, εντολή Στέφανου)
   «στον πωλητή μίκρυνε στο menu αναζήτησης αριστερά το μέγεθος της κάθε
   σελίδας που μπορούν να ανοίξουν: ερώτηση, ιστορικό, αιτήματα
   επιπλοποιίας, icon».
   Ο πωλητής έχει ΤΡΕΙΣ καρτέλες — δεν χρειάζεται το ίδιο ύψος με τον
   διαχειριστή που έχει εννιά. ⚠️ ΜΟΝΟ σε κινητό και ΜΟΝΟ στον πωλητή:
   τα υπόλοιπα μενού δεν αγγίζονται. */
@media (max-width: 620px) {
  /* 🔴 Η ΠΡΑΓΜΑΤΙΚΗ ΑΙΤΙΑ. Σε κινητό ισχύει `.nav-btn { flex: 1 1 auto }`
     (φτιαγμένο για την οριζόντια μπάρα της κεφαλίδας). Μέσα στο συρτάρι
     όμως η λίστα είναι ΚΑΘΕΤΗ και μεγαλώνει (`nav { flex: 1 }`), οπότε
     τα κουμπιά τεντώνονταν για να γεμίσουν την οθόνη: με 3 καρτέλες ο
     πωλητής έβλεπε κουμπιά **166px** το καθένα. Ο διαχειριστής, με 9,
     δεν το πρόσεχε. Ισχύει για ΟΛΟΥΣ — γι' αυτό μπαίνει έξω από το
     `body.seller`. */
  #drawer .nav-btn { flex: 0 0 auto; }

  body.seller #drawer .nav-btn {
    min-height: 38px;
    font-size: .88rem;
    padding: .35rem .7rem;
  }
  body.seller #drawer nav { gap: 2px; }

  /* Η ταυτότητα του χρήστη μαζεύεται ανάλογα. */
  body.seller .drawer-head {
    gap: 10px;
    padding: 2px 4px 10px;
    margin-bottom: 8px;
  }
  body.seller .drawer-avatar {
    width: 34px; height: 34px;
    font-size: .8rem;
  }
  body.seller .drawer-name { font-size: .9rem; }
  body.seller .drawer-role { font-size: .66rem; }
}


/* ── «powered by TBHUB» — διακριτικά (03/09/2026, εντολή Στέφανου) ────
   Δύο θέσεις, ίδιο στοιχείο: κάτω αριστερά σε υπολογιστή (απέναντι από
   τον διακόπτη θέματος), και μέσα στο συρτάρι κάτω από την Αποσύνδεση σε
   κινητό. ⚠️ Το σήμα της TBHUB είναι ΕΙΚΟΝΑ (`tbhub.svg`), όχι CSS: έτσι
   τα δικά της χρώματα δεν μπαίνουν στα tokens της VERNILAC. */
.tb-credit {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  color: var(--v-text-faint);
  font-size: .68rem;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .55;
  transition: opacity var(--t-fast) var(--ease-snap);
}
.tb-credit:hover { opacity: 1; color: var(--v-text-muted); }
.tb-credit:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 3px; }
.tb-credit img { border-radius: 3px; display: block; opacity: .9; }
.tb-credit strong { font-weight: var(--w-semi); letter-spacing: .04em; }

/* Κάτω αριστερά σε υπολογιστή. */
.tb-fixed { display: none; }
@media (min-width: 621px) {
  .tb-fixed {
    display: inline-flex;
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 40;
    padding: .3rem .5rem;
    border-radius: var(--r-pill);
    background: var(--v-canvas);
  }
}

/* Μέσα στο συρτάρι, κάτω από την Αποσύνδεση — μόνο σε κινητό. */
.drawer-foot .tb-credit { display: none; }
@media (max-width: 620px) {
  .drawer-foot .tb-credit {
    display: inline-flex;
    margin-top: .7rem;
    padding-left: .2rem;
  }
}


/* Φόρμα επεξεργασίας γνώσης, μέσα στην κάρτα (03/09/2026). */
.kn-edit {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--v-line);
}
.kn-edit textarea { min-height: 200px; }


/* ── «Λείπει το αποτέλεσμα» (04/09/2026, εντολή Στέφανου) ────────
   Amber = περιμένει κάτι από άνθρωπο, ίδια σημασία με τα υπόλοιπα
   πλαίσια της εφαρμογής. Τα κουμπιά ζουν ΜΕΣΑ στη γραμμή: δεν έχει
   νόημα να ανοίξει ολόκληρη καρτέλα για μία λέξη. */
.dash-h.is-ask::before { background: var(--v-amber); }
.wl.is-ask { border-left-color: var(--v-amber); cursor: default; }
.wl.is-ask:active { transform: none; }
.wl.is-ask .wl-main { cursor: pointer; }

.dash-note {
  margin: -.1rem 0 .5rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--v-text-muted);
}

.wl-acts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .wl.is-ask { flex-wrap: wrap; }
  .wl-acts { width: 100%; }
  .wl-acts button { flex: 1 1 auto; }
}


/* Στη σελίδα σύνδεσης το σήμα ζει μέσα στο υποσέλιδο της κάρτας
   (04/09/2026, εντολή Στέφανου). ⚠️ ΟΧΙ `.tb-fixed`: εκείνο κρύβεται
   κάτω από 621px, και στο login δεν υπάρχει συρτάρι να το φιλοξενήσει —
   σε κινητό θα εξαφανιζόταν τελείως. */
.login-foot { display: flex; flex-direction: column; align-items: center; }
.login-foot .tb-credit {
  display: inline-flex;
  margin-top: .6rem;
}


/* ── Είδος αιτήματος επιπλοποιίας (04/09/2026, εντολή Στέφανου) ───
   Δεύτερος διακόπτης, ακριβώς κάτω από τον τομέα. Ίδια γλώσσα με τον
   πρώτο· φαίνεται ΜΟΝΟ με την κλάση `.show`, που τη βάζει το JS όταν ο
   τομέας είναι επιπλοποιία και η συνομιλία δεν έχει ξεκινήσει. */
.case-switch { display: none; }
.case-switch.show {
  display: flex;
  gap: .3rem;
  margin: 0 0 .5rem;
  padding: .2rem;
  border: 1px solid var(--v-line);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}

.case-btn {
  flex: none;
  padding: .3rem .85rem;
  font-size: .9rem;
  font-weight: var(--w-med);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--v-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-snap),
              color var(--t-fast) var(--ease-snap);
}
.case-btn:hover { color: var(--v-text); }
.case-btn:active { transform: scale(.97); }
.case-btn.active { background: var(--v-text); color: var(--v-canvas); }
.case-btn:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }

/* Σε στενή οθόνη τα δύο λεκτικά δεν χωράνε δίπλα-δίπλα. */
@media (max-width: 460px) {
  .case-switch.show { width: 100%; }
  .case-btn { flex: 1 1 0; padding: .3rem .4rem; font-size: .82rem; }
}


/* Στο «Πρόβλημα Εφαρμογής» της επιπλοποιίας δεν υπάρχουν προτεινόμενες
   ερωτήσεις (04/09/2026, εντολή Στέφανου): ο υπάλληλος περιγράφει μια
   συγκεκριμένη αστοχία, όχι μια γενική απορία. Την κλάση τη βάζει το
   `paintCaseSwitch()`. */
#view-chat.no-quick .quick-wrap { display: none; }


/* ── Επεξεργασία λογαριασμού μέσα στον πίνακα (04/09/2026) ────────
   Ανοίγει ως γραμμή κάτω από τη γραμμή του χρήστη. Γραμμή Sky αριστερά,
   ίδια γλώσσα με την ανοιχτή καρτέλα αιτήματος. */
#mg-table tr.is-open > td { background: var(--v-surface-2); }
.mg-edit-row > td { padding: 0 !important; background: var(--v-surface-2); }

.mg-edit {
  padding: .9rem 1rem 1rem;
  border-left: 3px solid var(--v-sky);
  cursor: default;
}
.mg-edit-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.mg-edit-head .hint { margin: 0; }
.mg-edit .roles-box { margin: .2rem 0 .7rem; }
.mg-edit .temp-pass { margin-bottom: .7rem; }
.mg-edit .meta { margin: 0; }


/* ══════════════════════════════════════════════════════════════════
   SUPPORT — η οθόνη εργασίας του First Level Support (04/09/2026)
   ══════════════════════════════════════════════════════════════════ */

.sup-pane { display: none; }
.sup-pane.show { display: block; }

/* «Έτοιμος να γράψεις;» — η γέφυρα από τα στοιχεία στην ερώτηση. */
.sup-go-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sup-go-t { font-weight: var(--w-semi); }
.sup-go-card .hint { margin: .15rem 0 0; }
.sup-go-card button { flex: none; }

/* Οι κάρτες πελατών στην αναζήτηση «Ποιος καλεί;». */
.sup-hit {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  margin-bottom: .35rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-snap),
              background var(--t-fast) var(--ease-snap);
}
.sup-hit:hover { background: var(--v-surface-2); border-color: var(--v-line-hover); }
.sup-hit:active { transform: scale(.995); }
.sup-hit-main { flex: 1 1 auto; min-width: 0; }
.sup-hit-name { font-weight: var(--w-med); color: var(--v-text); }
.sup-hit-sub { font-size: .82rem; color: var(--v-text-muted); }
.sup-hit-n {
  flex: none;
  font-size: .8rem;
  color: var(--v-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Οι δύο πλαϊνές στήλες στην οθόνη ερώτησης ─────────────────────
   ⚠️ `position: fixed` ΜΕΣΑ στο #view-chat: η ροή του chat (φόρμα →
   thread → composer) μένει ΑΚΡΙΒΩΣ όπως ήταν, γιατί εκεί κρέμονται η
   κλειδωμένη οθόνη, η κύλιση μόνο του #thread και η ζώνη ασφαλείας του
   iPhone. Οι στήλες απλώς γεμίζουν το κενό δεξιά κι αριστερά. */
.fls-side { display: none; }

@media (min-width: 1180px) {
  /* Στενεύει ΜΟΝΟ η στήλη της συνομιλίας, και ΜΟΝΟ για τον FLS, ώστε να
     μείνει χώρος για τις δύο πλαϊνές. Κανένας άλλος ρόλος δεν αγγίζεται. */
  body.fls #view-chat > *:not(.fls-side) { max-width: 720px; }

  body.fls #view-chat.active > .fls-side {
    display: block;
    position: fixed;
    top: 96px;
    bottom: 18px;
    width: 300px;
    overflow-y: auto;
    padding: .9rem 1rem;
    border: 1px solid var(--v-line);
    border-radius: var(--r-edge);
    background: var(--v-surface-1);
  }
  body.fls #view-chat.active > .fls-left  { left: 18px; border-left: 3px solid var(--v-lime); }
  body.fls #view-chat.active > .fls-right { right: 18px; border-left: 3px solid var(--v-amber); }
  /* Με το αριστερό μενού του dashboard (10/09) η οθόνη έχει 236px λιγότερα: οι δύο
     πλαϊνές στενεύουν στα 240px και η συνομιλία στα 600px, αλλιώς πατούσαν η μία
     πάνω στην άλλη (μετρήθηκε: πελάτης 278-578, συνομιλία 478-1198). */
  body.dash.fls #view-chat > *:not(.fls-side) { max-width: 600px; }
  body.dash.fls #view-chat.active > .fls-side { width: 240px; }
}

.fls-side h3 {
  margin: 0 0 .6rem;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-text-faint);
}
.fls-row { margin-bottom: .55rem; }
.fls-row .k {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-text-faint);
}
.fls-row .v { color: var(--v-text); overflow-wrap: anywhere; }

/* Οι προτεινόμενες ερωτήσεις προς τον πελάτη — μπαίνουν στο πλαίσιο. */
.fls-ask {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: .35rem;
  padding: .5rem .6rem;
  font-size: .86rem;
  line-height: 1.35;
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
  background: transparent;
  color: var(--v-text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-snap),
              background var(--t-fast) var(--ease-snap);
}
.fls-ask:hover { background: var(--v-surface-2); border-color: var(--v-line-hover); }
.fls-ask:active { transform: scale(.98); }

/* «‹ Πίσω στο Support» — πάνω από τη συνομιλία. */
.fls-back {
  align-self: flex-start;
  margin-bottom: .5rem;
  padding: .35rem .7rem;
  font-size: .84rem;
  border: 1px solid var(--v-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--v-text-muted);
  cursor: pointer;
}
.fls-back:hover { color: var(--v-text); border-color: var(--v-text-muted); }


/* Η επιστολή που ξεδιπλώνεται μέσα στην ουρά εργασίας. */
.wl.is-open { border-color: var(--v-line-hover); background: var(--v-surface-2); }
.sup-letter {
  margin: -.15rem 0 .6rem;
  padding: .8rem .9rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
}
.sup-letter-body {
  max-height: 320px;
  overflow-y: auto;
  margin: .4rem 0 .7rem;
  padding: .7rem .8rem;
  white-space: pre-wrap;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--v-text);
  background: var(--v-canvas);
  border: 1px solid var(--v-line);
  border-radius: var(--r-edge);
}


/* 🔴 Η ΠΑΓΙΔΑ ΤΟΥ [hidden], ΞΑΝΑ (04/09/2026). Το `.req-switch` ορίζει
   `display: flex`, που νικάει τον κανόνα [hidden] του browser — ο
   διακόπτης έμενε ορατός σε χημικούς/διαχειριστές ενώ ήταν hidden.
   Ίδια αιτία με το scrim του συρταριού. */
.req-switch[hidden], .req-tab[hidden], .sup-pane[hidden], .card[hidden],
.wl[hidden], .kpi-row[hidden] { display: none !important; }


/* «Έχει ήδη ειπωθεί …» — μία διακριτική πρόταση, όχι δεύτερη λίστα. */
.fls-have {
  margin: .8rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--v-line);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--v-text-faint);
}


/* Οι γραμμές της λίστας «Πελάτες». Ίδια γλώσσα με τα αποτελέσματα της
   αναζήτησης — μία όψη για το ίδιο πράγμα. */
.sup-hit.is-open { border-color: var(--v-sky); background: var(--v-surface-2); }
.sup-hit-n {
  text-align: right;
  line-height: 1.5;
}
.sup-hit-when {
  font-size: .75rem;
  color: var(--v-text-faint);
}
.sup-hit-n .chip { margin: .1rem 0; }

@media (max-width: 620px) {
  .sup-hit { flex-wrap: wrap; }
  .sup-hit-n { text-align: left; width: 100%; }
}


/* «από την ιδιότητα: Ελαιοχρωματιστής» — δίπλα στον διακόπτη τομέα. */
.dom-why {
  align-self: center;
  margin-left: .5rem;
  font-size: .74rem;
  color: var(--v-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dom-why[hidden] { display: none !important; }
@media (max-width: 620px) { .dom-why { display: none; } }


/* ── «Υπάρχει αίτημα για αποστολή» (04/09/2026, εντολή Στέφανου) ───
   Οι μετρητές προσπερνιούνται εύκολα· αυτό είναι το ΕΝΑ πράγμα που δεν
   πρέπει να μείνει. Γραμμή Lime — «έτοιμο», όχι «πρόβλημα». */
.sup-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--v-line);
  border-left: 4px solid var(--v-lime);
  border-radius: var(--r-edge);
  background: var(--v-surface-1);
}
.sup-alert-txt { flex: 1 1 260px; min-width: 0; }
.sup-alert-txt strong { color: var(--v-text); }
.sup-alert-sub {
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--v-text-muted);
  overflow-wrap: anywhere;
}
.sup-alert button { flex: none; }


/* ══════════════════════════════════════════════════════════════════
   ΕΥΘΥΓΡΑΜΜΙΣΗ ΜΕ ΤΟ BRAND BOOK — 04/09/2026
   Καμία αλλαγή λειτουργίας· μόνο χρώμα, τυπογραφία και σχήμα.
   Πηγή: skill «vernilac-brand», references/colour-type-layout.md.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. SPECTRUM BAR (μορφή «edge») ──────────────────────────────
   Πέντε ίσα τμήματα, σταθερή σειρά, ύψος 1/60 του πλάτους της
   διάταξης: 24px στα 1440, 6px σε κινητό. Χωρίς κενά, χωρίς ακτίνα,
   χωρίς διαφάνεια — είναι μελάνι, όχι διακόσμηση. */
.spectrum-bar {
  display: flex;
  width: 100%;
  height: clamp(4px, 1.667vw, 24px);
  flex: none;
}
.spectrum-bar i { flex: 1 1 0; display: block; }
.spectrum-bar i:nth-child(1) { background: var(--v-sky); }
.spectrum-bar i:nth-child(2) { background: var(--v-lime); }
.spectrum-bar i:nth-child(3) { background: var(--v-sun); }
.spectrum-bar i:nth-child(4) { background: var(--v-amber); }
.spectrum-bar i:nth-child(5) { background: var(--v-flame); }

/* ⚠️ ΣΥΝΕΙΔΗΤΗ ΠΡΟΣΑΡΜΟΓΗ. Το Brand Book δίνει ύψος 1/60 του πλάτους
   (24px στα 1440) για ΙΣΤΟΤΟΠΟ. Εδώ, μέσα στο κέλυφος της εφαρμογής, η
   μπάρα μένει σταθερά 8px: η οθόνη της συνομιλίας είναι κλειδωμένη σε
   ύψος και μια ζώνη 24px θα έκλεβε χώρο από τα μηνύματα σε κάθε σελίδα.
   Ό,τι ΔΕΝ αλλάζει: η σειρά των πέντε, τα ίσα πλάτη, το μηδέν κενό, το
   μηδέν διαφάνειας. Η σελίδα σύνδεσης — που είναι «σελίδα», όχι εργαλείο
   — κρατά το κανονικό 1/60. */
body.chatui .spectrum-bar { height: 8px; }

/* ── 2. DISPLAY — Roboto Condensed, ΜΟΝΟ κεφαλαία ────────────────
   «Echoes the Wordmark: heavy, condensed, squared.» Ποτέ σε τρεχούμενο
   κείμενο· μόνο τίτλοι, επικεφαλίδες καρτών και μεγάλοι αριθμοί.
   ⚠️ Τα ελληνικά θέλουν αέρα: +2% tracking στα κεφαλαία. */
.dash-title,
.login-card h1,
.empty-state h2,
main h2,
.dash-h,
.corr-label,
.chip.st-draft, .chip.st-open, .chip.st-answered, .chip.st-closed {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* ⚠️ ΠΑΝΤΑ var(--w-bold), ΠΟΤΕ σκέτο 700: στο σκούρο θέμα τα βάρη
   κατεβαίνουν ένα σκαλί (οπτική διόρθωση). Η Roboto Condensed έχει μόνο
   700, οπότε ο browser «κουμπώνει» εκεί — αλλά ο κανόνας μένει ένας. */
.dash-title { font-weight: var(--w-bold); }
main h2, .dash-h { font-weight: var(--w-bold); letter-spacing: .03em; }
.empty-state h2 { font-weight: var(--w-bold); letter-spacing: .01em; }

/* Οι μεγάλοι αριθμοί είναι «display», όχι σώμα κειμένου. */
.kpi .v, .acc-v, .mg-todo-n, .stat b {
  font-family: var(--display);
  font-weight: var(--w-bold);
  letter-spacing: 0;
}

/* ── 3. DATA — Roboto Mono ───────────────────────────────────────
   «Κωδικοί, ποσοστά, αριθμοί — ένας κωδικός σε mono ΦΑΙΝΕΤΑΙ κωδικός
   και όχι λέξη.» Eyebrows και ετικέτες με tracking +0.14…0.22em. */
.kpi .t, .fls-row .k, .mg-th, .sup-hit-n, .wl-no, .case-note-time,
.ac-sub, .fls-side h3 {
  font-family: var(--mono);
}
.kpi .t, .fls-side h3, .fls-row .k { letter-spacing: .16em; }
.mg-th { letter-spacing: .1em; }

/* ── 4. Το σήμα «εσωτερική χρήση» και τα chips ────────────────────
   Τετράγωνα, με mono γράμματα — σαν ετικέτα κωδικού, όχι σαν κουμπί. */
.chip { font-family: var(--mono); letter-spacing: .04em; }

/* ── 5. Ένα χρώμα φάσματος ανά επιφάνεια ─────────────────────────
   «One at a time: a single piece normally carries one Spectrum colour.»
   Η μπάρα στην κορυφή είναι η μοναδική θέση όπου συνυπάρχουν και τα
   πέντε. Παντού αλλού το Sky κρατά τη διάδραση και τα υπόλοιπα
   εμφανίζονται ΜΟΝΟ ως γραμμή κατηγορίας/κατάστασης — αυτό ίσχυε ήδη. */

/* ── 6. Ασυμμετρία αντί για κεντράρισμα ──────────────────────────
   «VERNILAC layouts have a left-hand spine.» Ο τίτλος της σελίδας
   αγκυρώνεται αριστερά με μια κοντή μαύρη ράβδο — ΟΧΙ με ράβδο του
   φάσματος: εκείνη είναι ΜΟΝΟ η Spectrum Bar των πέντε χρωμάτων, και
   ζει ήδη στην πάνω ακμή. Ένα χρώμα ανά επιφάνεια.
   ⚠️ ΟΧΙ linear-gradient — ο κανόνας #2 της εφαρμογής επιτρέπει
   διαβαθμίσεις μόνο ως μάσκες διαφάνειας. */
.dash-head { position: relative; padding-top: 1rem; }
.dash-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 3px;
  background: var(--v-text);
}


/* ── «powered by TBHUB»: ΟΧΙ στους πωλητές (04/09/2026, εντολή
   Στέφανου). Μένει σε FLS, χημικούς, διαχειριστές και στη σελίδα
   σύνδεσης — εκείνη είναι κοινή για όλους και δεν έχει ρόλο.
   ⚠️ Πιάνει ΚΑΙ τις δύο θέσεις: τη σταθερή κάτω αριστερά σε υπολογιστή
   (.tb-fixed) και εκείνη μέσα στο συρτάρι σε κινητό. Το `!important`
   είναι σκόπιμο — και οι δύο ορίζουν δικό τους `display` μέσα σε
   media query (η γνωστή παγίδα ειδικότητας). */
body.seller .tb-credit { display: none !important; }

/* ── Οι δύο δρόμοι του πωλητή μετά από 👎 με σχόλιο (07/09/2026) ──
   «Αφορά πελάτη» = ανοίγει αίτημα · «Ερώτημα πωλητή» = μόνο εκπαίδευση.
   Ίδια γλώσσα με το .comment-box που ζει ακριβώς από πάνω. */
.fb-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .6rem .7rem;
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
}
.fb-choice-q {
  flex: 1 1 100%;
  margin: 0 0 .15rem;
  font-size: .86rem;
  font-weight: var(--w-semi);
  color: var(--v-text);
}
/* Το σχόλιο του 👎 μέσα στην καρτέλα του αιτήματος: είναι ο λόγος που
   υπάρχει το αίτημα, άρα ξεχωρίζει με τη γραμμή της προσοχής. */
.ticket-answer.fb-note { border-left: 3px solid var(--v-amber); }

/* ── ΦΩΤΟΓΡΑΦΙΕΣ ΑΣΤΟΧΙΑΣ (07/09/2026) ──────────────────────────────
   Λωρίδα ανεβάσματος μέσα στη μπάρα του case, και γκαλερί ανάγνωσης
   στην καρτέλα και στη βιβλιοθήκη. Ακτίνα 0 παντού, κατά το Brand Book. */
.photo-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  padding: .6rem .7rem;
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
}
.photo-head { display: flex; align-items: baseline; gap: .5rem; }
.photo-label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--v-text-muted);
}
.photo-count { font-family: var(--mono); font-size: .8rem; color: var(--v-text); }
.photo-shelf { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-thumb { position: relative; width: 84px; height: 84px; }
.photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid var(--v-line);
  cursor: zoom-in;
  display: block;
}
.photo-del {
  position: absolute; top: 0; right: 0;
  width: 22px; height: 22px;
  line-height: 1;
  padding: 0;
  border: none;
  background: var(--v-flame);
  color: var(--v-paper);
  cursor: pointer;
  font-size: 1rem;
}
.photo-del:hover { filter: brightness(1.1); }
.photo-gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .8rem; }
.photo-gallery img {
  width: 132px; height: 132px;
  object-fit: cover;
  border: 1px solid var(--v-line);
  display: block;
}
.photo-gallery a:focus-visible img { outline: 2px solid var(--v-focus); outline-offset: 2px; }
@media (max-width: 620px) {
  .photo-thumb { width: 72px; height: 72px; }
  .photo-gallery img { width: 104px; height: 104px; }
}

/* Κάρτα αστοχίας στη βιβλιοθήκη: φωτογραφίες + ερώτημα + απάντηση, ως
   μία μονάδα γνώσης. Γραμμή Sky — είναι γνώση, όχι εκκρεμότητα. */
.kn-fail {
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-sky);
  background: var(--v-canvas);
  padding: .8rem .9rem;
  margin-bottom: .9rem;
}
.kn-fail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.kn-fail-when { font-size: .78rem; color: var(--v-text-muted); }

/* Μικρογραφία που ο browser δεν μπορεί να ζωγραφίσει (HEIC του iPhone):
   δείχνουμε ρητά ότι η φωτογραφία επιλέχθηκε — αλλιώς φαίνεται κόλλημα. */
.photo-noprev {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .15rem;
  background: var(--v-surface-2);
  border: 1px solid var(--v-line);
  text-align: center;
  padding: .2rem;
}
.photo-noprev-tick { font-size: 1.1rem; color: var(--v-lime); line-height: 1; }
.photo-noprev-name {
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--v-text-muted);
  word-break: break-all;
  line-height: 1.15;
}

/* ── ΚΟΥΜΠΙ ΦΩΤΟΓΡΑΦΙΑΣ ΣΤΟΝ COMPOSER (07/09/2026, εντολή Στέφανου) ──
   «Όπως στο WhatsApp»: ανάμεσα στο πλαίσιο κειμένου και στο βελάκι.
   ΔΕΥΤΕΡΕΥΟΝ σε σχέση με την αποστολή — διάφανο με περίγραμμα, ώστε να
   μένει ΜΙΑ κύρια ενέργεια στη σειρά (κανόνας του Brand Book). */
.attach-round {
  position: relative;
  width: 50px; height: 50px; min-height: 50px;
  flex: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--v-line);
  color: var(--v-text-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-snap),
              border-color var(--t-fast) var(--ease-snap);
}
.attach-round:hover { color: var(--v-text); border-color: var(--v-text); }
.attach-round:active { transform: scale(.97); }
.attach-round svg { width: 24px; height: 24px; }
.attach-round[hidden] { display: none !important; }
/* Ο μετρητής, σαν σήμα εφαρμογής κινητού. */
.attach-n {
  position: absolute; top: -1px; right: -1px;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v-sky);
  color: var(--v-ink);
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1;
}
.attach-n[hidden] { display: none !important; }

/* Η λωρίδα προεπισκόπησης έγινε ΛΕΠΤΗ: μόνο μικρογραφίες, χωρίς
   επικεφαλίδα και επεξήγηση — αυτά τα έλεγε η παλιά ογκώδης λωρίδα και
   έτρωγαν 183px από την οθόνη του κινητού. */
.photo-strip.slim {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;          /* ΠΟΤΕ σε δεύτερη γραμμή: σε κινητό η
                                 στοίβα έτρωγε 129px αντί για 70 */
  gap: .5rem;
  padding: .4rem .5rem;
  border-left-width: 3px;
}
.photo-strip.slim .photo-shelf {
  gap: .4rem;
  flex-wrap: nowrap;
  overflow-x: auto;           /* αν δεν χωρέσουν, κυλάνε — δεν στοιβάζονται */
  scrollbar-width: none;
}
.photo-strip.slim .photo-shelf::-webkit-scrollbar { display: none; }
.photo-strip.slim .photo-thumb { width: 54px; height: 54px; }
.photo-strip.slim .photo-del { width: 18px; height: 18px; font-size: .85rem; }
.photo-strip.slim .photo-note {
  flex: 1 1 auto;
  min-width: 0;               /* κάθε flex κείμενο που πρέπει να συρρικνωθεί */
  font-size: .72rem;
  line-height: 1.25;
  color: var(--v-text-muted);
  margin: 0;
}
@media (max-width: 620px) {
  /* Σε κινητό μιλάει το σήμα του κουμπιού — η επεξήγηση περισσεύει. */
  .photo-strip.slim .photo-note { display: none; }
}

/* Όσο ετοιμάζεται/ανεβαίνει η φωτογραφία — ΠΟΤΕ μόνιμη κατάσταση: το
   `finally` στο addPhoto τη βγάζει ό,τι κι αν συμβεί. */
.attach-round.busy { opacity: .5; pointer-events: none; }
.attach-round:disabled { opacity: .45; cursor: default; }

/* ── ΠΡΟΒΟΛΗ ΦΩΤΟΓΡΑΦΙΑΣ (07/09/2026, εντολή Στέφανου) ──────────────
   Στο ίδιο παράθυρο, με πλοήγηση στις φωτογραφίες του ίδιου αιτήματος.
   Ακτίνα 0 παντού, κατά το Brand Book. */
.lb-back {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--v-scrim-photo);
  padding: 3rem 1rem 4rem;
}
.lb-box { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.lb-box img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  display: block;
}
.lb-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 64px;
  padding: 0;
  border: none;
  background: var(--v-scrim-photo-btn);
  color: var(--v-paper);
  font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.lb-nav:hover { background: var(--v-scrim-photo); }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb-nav[hidden] { display: none !important; }
.lb-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  padding: 0;
  border: none;
  background: var(--v-scrim-photo-btn);
  color: var(--v-paper);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.lb-close:hover { background: var(--v-scrim-photo); }
.lb-count {
  position: absolute; bottom: 1.2rem; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--v-paper);
}
/* Η μικρογραφία της γκαλερί είναι κουμπί — ίδια όψη με πριν. */
.photo-open {
  padding: 0; border: none; background: none; cursor: zoom-in;
  display: block; line-height: 0;
}
.photo-open:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.ticket-photo-add { margin: .3rem 0 .9rem; }
.case-note-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; margin-top: .4rem; }
.case-note-actions .ticket-photo-add { margin: 0; }
.case-draft-hint { margin: .3rem 0 0; }
.ticket-photo-add .hint { margin: .3rem 0 0; }

/* ── ΤΟ TICKET-ΦΟΡΜΑ ΤΟΥ «ΠΡΟΒΛΗΜΑΤΟΣ ΕΦΑΡΜΟΓΗΣ» (07/09/2026) ──────────
   Παίρνει τη θέση της συνομιλίας: κυλάει ΑΥΤΟ, όχι η σελίδα. */
.problem-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .9rem 1rem 1.2rem;
  background: var(--v-surface-1);
  border: 1px solid var(--v-line);
  border-top: 3px solid var(--v-flame);
}
.problem-form[hidden] { display: none !important; }
.problem-form label { display: block; margin: .8rem 0 .3rem; font-weight: var(--w-semi); }
.problem-form textarea { width: 100%; box-sizing: border-box; }
.problem-form .pf-hint { margin: 0 0 .35rem; }
.problem-form .pf-photos {
  margin-top: .9rem;
  padding: .6rem .7rem;
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-amber);
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
}
/* Σε λειτουργία ticket η συνομιλία και το πλαίσιο γραφής ΚΡΥΒΟΝΤΑΙ —
   μένουν μόνο οι δύο διακόπτες (τομέας, είδος) για να γυρίσει πίσω. */
#view-chat.problem-mode #thread,
#view-chat.problem-mode #jump-bottom,
#view-chat.problem-mode .composer .row,
#view-chat.problem-mode .composer .quick-wrap,
#view-chat.problem-mode .composer #composer-hint,
#view-chat.problem-mode #photo-strip,
#view-chat.problem-mode #conv-actions { display: none !important; }
/* Η απάντηση του χημικού μέσα στην καρτέλα. */
.ticket-answer-box { margin: .5rem 0 .9rem; }
.ticket-answer-box textarea { width: 100%; box-sizing: border-box; min-height: 200px; }
.ticket-answer-box .hint { margin: .3rem 0 .6rem; }

/* ── ΦΟΡΜΑ TICKET: Η ΚΑΡΤΕΛΑ ΠΕΛΑΤΗ ΑΝΟΙΓΕΙ ΟΛΟΚΛΗΡΗ (08/09/2026) ──────
   Εντολή Στέφανου: «όταν ανοίγω ticket και προσθέτω στοιχεία πελάτη να
   ανοίγει όλη η καρτέλα — τώρα κολλάει πάνω». Το όριο 62vh + εσωτερική
   κύλιση υπάρχει για να μένει ορατή η ΣΥΝΟΜΙΛΙΑ· εδώ δεν υπάρχει
   συνομιλία, οπότε ολόκληρη η ενότητα γίνεται ΜΙΑ σελίδα που κυλάει:
   πελάτης → πρόβλημα → φωτογραφίες → αποστολή.
   ⚠️ Ίδια δομή επιλογέα με τον κανόνα που νικάει (+ .problem-mode), αλλιώς
   χάνει στην ειδικότητα — η γνωστή παγίδα. Μόνο σε υπολογιστή: σε κινητό
   ο πωλητής έχει ήδη το φύλλο πλήρους οθόνης με «Καταχώρηση». */
@media (min-width: 621px) {
  body.chatui #view-chat.active.problem-mode {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.chatui #view-chat.active.problem-mode > #cust-form.show:not(.collapsed) {
    max-height: none;
    flex: none;
  }
  body.chatui #view-chat.active.problem-mode > #cust-form.show > #cust-body {
    overflow: visible;
    flex: none;
  }
  body.chatui #view-chat.active.problem-mode #near-shops { max-height: none; }
  body.chatui #view-chat.active.problem-mode > #problem-form {
    flex: none;
    overflow: visible;
    margin-top: .75rem;
  }
  /* Οι διακόπτες (τομέας / είδος) μένουν κάτω, μικροί — αλλά δεν
     «καρφώνονται»: μία σελίδα, μία κύλιση. */
  body.chatui #view-chat.active.problem-mode > .composer { flex: none; }
}

/* ── Η ΜΑΖΕΜΕΝΗ ΚΑΡΤΕΛΑ ΠΕΛΑΤΗ: ΜΙΑ ΓΡΑΜΜΗ, ΕΥΘΥΓΡΑΜΜΙΣΜΕΝΗ (08/09/2026) ──
   Ο Στέφανος: «το "δεν έχουν συμπληρωθεί ακόμα" όταν είναι κλειστή η
   καρτέλα βγαίνει εκτός πεδίου, δεν είναι aligned».
   1. Μαζεμένη, ο τίτλος ΔΕΝ χρειάζεται το κάτω περίγραμμα και το κενό
      του (χωρίζουν τίτλο από πεδία που δεν φαίνονται) — με αυτά το κείμενο
      καθόταν 5px ψηλότερα από την πλακέτα και το βελάκι. */
#cust-form.collapsed .cust-head > h2 {
  padding-bottom: 0;
  border-bottom: 0;
}
/* 2. Στη σελίδα που κυλάει (φόρμα ticket) η μαζεμένη κάρτα ΔΕΝ επιτρέπεται
      να συρρικνωθεί: ο γενικός κανόνας `flex: 0 1 auto` την έριχνε στα
      24px ενώ η κεφαλίδα της είναι 32px, και η πλακέτα ξεχείλιζε πάνω στην
      κόκκινη γραμμή της φόρμας. Σε ΟΛΑ τα πλάτη — ίδια ειδικότητα με τον
      κανόνα που νικάει, + .problem-mode. */
body.chatui #view-chat.active.problem-mode > #cust-form.show.collapsed {
  flex: none;
  min-height: 0;
}

/* ── FLS + φόρμα ticket: ΧΩΡΙΣ τη στήλη «Τι να ρωτήσω» (08/09/2026) ────
   Εντολή Στέφανου: «στο account FLS όταν πρόκειται για πρόβλημα εφαρμογής
   δεν χρειάζεται το "Τι λείπει ακόμα"». Η στήλη υπάρχει για να προτείνει
   ερωτήσεις ΜΕΤΑ την απάντηση του βοηθού — στο ticket δεν απαντά βοηθός.
   Η ΑΡΙΣΤΕΡΗ στήλη (πελάτης, «Πίσω στο Support», «Διόρθωση») μένει: εκεί
   βλέπει ο FLS ποιον αφορά, αφού η φόρμα πελάτη του ζει στο Support.
   Με !important: η στήλη έχει δικό της `display` μέσα σε media query. */
#view-chat.problem-mode #fls-coach { display: none !important; }

/* Διακόπτης brand (βήμα 4): το .domain-switch ορίζει display: flex — το
   [hidden] του browser χάνει (η γνωστή παγίδα). */
#brand-switch[hidden] { display: none !important; }

/* ── Βιτρίνα ATLACOLL: ό,τι δεν είναι token (09/09/2026) ── */
:root[data-co="atlacoll"] .spectrum-bar i { background: var(--atl-orange); }   /* η Spectrum Bar είναι VERNILAC· εδώ μία πορτοκαλί γραμμή */
:root[data-co="atlacoll"] header .logo-wrap { background: transparent; padding: 0; }
:root[data-co="atlacoll"] header img.logo { height: 36px; }                     /* 300×98 → 110px πλάτος, πάνω από τα 90px του Brand Book */
:root[data-co="atlacoll"] .title,
:root[data-co="atlacoll"] .empty-state h2,
:root[data-co="atlacoll"] .home h4 { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; }
:root[data-co="atlacoll"] .empty-cats > * { border-top-color: var(--atl-ink); }
:root[data-co="atlacoll"] .empty-cats > *:nth-child(odd) { border-top-color: var(--atl-orange); }
:root[data-co="atlacoll"] #brand-switch .dom-btn.active { background: var(--atl-orange); color: var(--atl-ink); }
:root[data-co="atlacoll"] .send-round:not(:disabled) { background: var(--atl-orange); color: var(--atl-ink); }
:root[data-co="atlacoll"] .login-card .badge .wm-light,
:root[data-co="atlacoll"] .login-card .badge .wm-dark { display: none !important; }
.login-card .badge .wm-atl { display: none; }
:root[data-co="atlacoll"] .login-card .badge .wm-atl { display: block; height: 120px; width: auto; margin: 0 auto; }

/* ── Το χημείο ζητάει περισσότερες πληροφορίες (09/09/2026) ──────────
   Μέσα στη μπάρα «πρόχειρο» της συνομιλίας: οι ερωτήσεις του χημικού
   πάνω από το «Αποστολή». Ίδια όψη με τις σημειώσεις των cases. */
.conv-info-request { margin-bottom: .6rem; }
.conv-info-request .case-note { margin-top: .4rem; }
.ticket-answer-box.ask-info textarea { width: 100%; min-height: 110px; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD ΤΗΣ ΒΙΤΡΙΝΑΣ ATLACOLL (10/09/2026, Πλάνο Ε — mockup Στέφανου)
   Ισχύει ΜΟΝΟ με body.dash (η πόρτα ATLACOLL, από το /api/me). Η VERNILAC
   δεν αλλάζει ούτε pixel: κανένας κανόνας εδώ δεν πιάνει χωρίς body.dash.
   Αριστερό μενού που ανοιγοκλείνει από το ☰ (body.side-collapsed), αρχική
   με κουτάκια ανά ρόλο, ATLATHERM ως καρτέλα. Χρώματα ΜΟΝΟ από tokens.
   ⚠️ Στο ΤΕΛΟΣ του αρχείου επίτηδες: το body.chatui #app (flex, fixed)
   ορίζεται πιο πάνω με ίδια ειδικότητα — κερδίζει ό,τι γράφτηκε τελευταίο.
   ══════════════════════════════════════════════════════════════════ */
#side { display: none; }

@media (min-width: 621px) {
  body.dash #app {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    /* ⚠️ Η Spectrum Bar είναι ΚΑΙ αυτή παιδί του #app: χωρίς δική της
       περιοχή έπεφτε σε νέα γραμμή ΚΑΤΩ από το μενού (πορτοκαλί λωρίδα
       στο κάτω μέρος — το πάθαμε στην πρώτη δοκιμή). */
    grid-template-areas: "bar bar" "hdr hdr" "side main";
  }
  body.dash .spectrum-bar { grid-area: bar; }
  body.dash.side-collapsed #app { grid-template-columns: 0 minmax(0, 1fr); }
  body.dash header { grid-area: hdr; }
  body.dash main { grid-area: main; min-height: 0; }
  /* Το <nav> μετακομίζει στο #side-nav από το placeNav — μέχρι τότε κρυφό,
     ώστε να μη φανεί για ένα καρέ ως οριζόντια μπάρα. */
  body.dash header > nav { display: none; }
  body.dash #btn-menu { display: inline-flex; }
  /* Μόνο το λογότυπο πάνω: η γραμμή της πλατφόρμας στέκεται δίπλα του
     ως κείμενο σώματος, όχι ως δεύτερος τίτλος. */
  body.dash .title.title-tagline-only { font-size: 0; line-height: 1; }
  body.dash .title.title-tagline-only small { font-size: .8rem; line-height: 1.3; }

  body.dash #side {
    grid-area: side;
    display: flex; flex-direction: column;
    min-height: 0; overflow-y: auto;
    background: var(--side-bg);
    color: var(--v-paper);
    padding: 8px 0 0;
    scrollbar-width: thin;
  }
  body.dash.side-collapsed #side { display: none; }
  /* Το <nav> ζει μέσα στο #side-nav — για να σπρωχτεί η Αποσύνδεση κάτω
     κάτω πρέπει ΚΑΙ αυτό να μεγαλώνει. */
  body.dash #side-nav { flex: 1; display: flex; flex-direction: column; min-height: 0; }

  .side-brand { padding: 0 16px 12px; border-bottom: 1px solid var(--side-line); margin-bottom: 6px; }
  .side-word { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 700;
               font-size: 22px; letter-spacing: .08em; color: var(--v-paper); }
  .side-sub { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 11px;
              letter-spacing: .12em; text-transform: uppercase; color: var(--side-text); }

  /* ⚠️ Το <nav> έχει δικό του ανοιχτό φόντο και padding από τον κανόνα της
     κεφαλίδας (rgb 247) — λευκά γράμματα πάνω σε ανοιχτό γκρι έβγαιναν
     αχνά (Στέφανος 10/09: «δεν φαίνονται καλά τα γράμματα»). */
  body.dash #side nav { flex: 1; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0;
                        background: transparent; padding: 0; margin: 0; border: 0; box-shadow: none; }
  body.dash #side .nav-btn .nav-badge { position: static; margin-left: auto; flex: none; }
  /* Το «powered by TBHUB» κάθεται δεξιά από το μενού, όχι πάνω του. */
  body.dash .tb-credit.tb-fixed { left: calc(236px + 1.1rem); }
  body.dash.side-collapsed .tb-credit.tb-fixed { left: 1.1rem; }
  /* Το μενού ΟΠΩΣ στο Cockpit (Design System v3 «Brand-true», 10/09/2026
     εντολή Στέφανου): 14px/600 σε ανοιχτό γκρι πάνω σε σχεδόν μαύρο (12:1,
     διαβάζεται άνετα), ενεργό = ΛΕΥΚΟ + πορτοκαλί γραμμή αριστερά + 12%
     λευκό φόντο· hover 8%. Χωρίς ΚΕΦΑΛΑΙΑ — έτσι είναι εκεί. */
  body.dash #side .nav-btn:not(#btn-theme) {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; text-align: left;
    padding: 9px 12px; margin: 0 10px; width: calc(100% - 20px);
    border-bottom: 0; border-left: 3px solid transparent;
    color: var(--side-text);
    font-family: var(--font);
    font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none;
    opacity: 1;
    transition: background var(--t-fast) var(--ease-snap), color var(--t-fast) var(--ease-snap);
  }
  body.dash #side .nav-btn:hover { color: var(--v-paper); background: color-mix(in srgb, var(--v-paper) 8%, transparent); }
  body.dash #side .nav-btn.active {
    color: var(--v-paper); font-weight: 700;
    border-left-color: var(--side-accent);
    background: color-mix(in srgb, var(--v-paper) 12%, transparent);
  }
  body.dash #side .nav-btn .nav-badge { background: var(--cc-bad); color: var(--v-paper); font-family: var(--cc-data);
    font-size: 11px; padding: 1px 7px; border-radius: 0; font-variant-numeric: tabular-nums; }
  body.dash #side .nav-btn .nav-badge { margin-left: auto; }
  /* Η Αποσύνδεση στο κάτω μέρος του μενού, χωριστά — Flame μόνο στο hover. */
  /* ⚠️ Το :not(#btn-theme) του γενικού κανόνα μετράει ως ID στην ειδικότητα και νικούσε το margin-top: auto —
     η Αποσύνδεση καθόταν αμέσως μετά τις Μηχανές (εντολή Στέφανου 10/09: «το αποσύνδεση να πάει κάτω»). */
  body.dash #side .nav-btn.danger:not(#btn-theme) { margin-top: auto; }
  body.dash #side .nav-btn.danger:hover { color: var(--v-flame); }

  .side-me { display: flex; align-items: center; gap: .6rem; padding: 12px 16px 14px;
             border-top: 1px solid var(--side-line); font-size: 13px; color: var(--v-paper); }
  .side-me-text { flex: 1; min-width: 0; opacity: .85; }
  /* Ο διακόπτης θέματος δίπλα στο όνομα — όχι πια καρφωμένος κάτω δεξιά της
     οθόνης (εντολή Στέφανου 10/09). Ίδιο στοιχείο, μετακομίζει με το placeNav. */
  body.dash #side #btn-theme {
    position: static; right: auto; bottom: auto; z-index: auto;
    width: 36px; height: 36px; min-height: 36px; padding: 0; margin: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--side-line); background: transparent; color: var(--v-paper);
  }
  body.dash #side #btn-theme:hover { border-color: var(--v-paper); background: color-mix(in srgb, var(--v-paper) 8%, transparent); }
  .side-me b { display: block; color: var(--v-paper); font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
               font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
}

/* ── Αρχική: κουτάκια ανά ρόλο ── */
/* ΟΛΑ ΣΤΟΙΧΙΣΜΕΝΑ (εντολή Στέφανου 10/09): σταθερός αριθμός ίσων στηλών —
   όχι auto-fit, που έδινε 4 στενά κουτάκια πάνω και 2 φαρδιά κάτω. Ίδιο
   ύψος σε κάθε σειρά (grid), τίτλος με χώρο δύο γραμμών ώστε η περιγραφή
   να ξεκινά στο ίδιο ύψος σε όλα. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 1rem 0 1.2rem; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 16/09 ι: σε ταμπλέτα το μενού αφήνει ~473px — τρεις στήλες έβγαιναν 151px */
.tile {
  appearance: none; font: inherit; color: var(--v-text); text-align: left; cursor: pointer;
  border: 1px solid var(--v-line); border-top: 4px solid var(--v-sky); border-radius: 0;
  background: var(--v-surface-1); padding: 14px 14px 12px; min-height: 132px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  transition: background var(--t-fast) var(--ease-snap);
}
.tile > div { display: flex; flex-direction: column; flex: 1; }
.tile:hover { background: var(--v-surface-2); }
.tile:active { transform: scale(.99); }
.tile.aqua { border-top-color: var(--atl-aqua, var(--v-sky)); }
.tile.ink  { border-top-color: var(--v-text); }
.tile.soon { opacity: .62; }
.tile .ic { width: 28px; height: 28px; color: var(--v-sky); }
.tile.aqua .ic { color: var(--atl-aqua, var(--v-sky)); }
.tile.ink .ic { color: var(--v-text); }
.tile h3 { margin: 10px 0 0; min-height: 2.4em; font-size: 1.05rem; line-height: 1.2;
           font-family: "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.tile p { margin: 2px 0 0; font-size: .8rem; color: var(--v-text-muted); }
.tile .soon-tag { margin-top: auto; padding-top: .3rem; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .68rem; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--v-sky); border: 1px solid var(--v-sky); padding: 0 .35rem; align-self: flex-start; }
.home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-panel h2 { margin-bottom: .3rem; }
.home-row { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0;
            border-top: 1px solid var(--v-line); cursor: pointer; }
.home-row:hover .home-t { text-decoration: underline; }
.home-row .no { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .78rem; color: var(--v-text-muted); white-space: nowrap; }
.home-row .home-t { flex: 1; min-width: 0; font-size: .92rem; }
.home-row .home-m { display: block; font-size: .78rem; color: var(--v-text-muted); }
.card.soon p { max-width: 62ch; color: var(--v-text-muted); }
/* ── ATLATHERM μέσα στη βιτρίνα (μεταφορά του seller.css της 8424) ── */
.at-brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.at-logo { height: 34px; width: auto; display: block; }
.at-logo-dark { display: none; }
:root[data-theme="dark"] .at-logo-light { display: none; }
:root[data-theme="dark"] .at-logo-dark { display: block; }
.at-brand .dash-title { margin: 0; }
.at-tabs { display: flex; gap: .4rem; margin: .4rem 0 1rem; flex-wrap: wrap; }
.at-tabs .at-tab.active { border-color: var(--v-text); color: var(--v-text); font-weight: var(--w-semi); }
.at-block { margin-bottom: 1rem; }
.at-fields { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); align-items: start; }
.at-fields .field, .at-sub .field { display: block; margin: 0; }
.at-fields .field > span, .at-sub .field > span {
  display: flex; align-items: flex-end; min-height: 2.5em; line-height: 1.25;
  font-size: .8rem; font-weight: var(--w-semi); color: var(--v-text-muted); margin-bottom: .3rem;
}
.at-fields input, .at-sub input, .at-sub select, #at-search { width: 100%; box-sizing: border-box; }
.at-more { margin-top: 1rem; border-top: 1px solid var(--v-line); padding-top: .8rem; }
.at-more > summary { cursor: pointer; list-style: none; color: var(--v-sky); font-weight: var(--w-semi);
                     font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .85rem;
                     text-transform: uppercase; letter-spacing: .04em; }
.at-more > summary::-webkit-details-marker { display: none; }
.at-more > summary::before { content: "❯ "; }
.at-more[open] > summary { margin-bottom: .85rem; }
.at-presets { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.at-preset { appearance: none; text-align: left; font: inherit; cursor: pointer; padding: .85rem; border-radius: 0;
             background: var(--v-canvas); border: 1px solid var(--v-line); border-left: 3px solid transparent; color: var(--v-text);
             transition: border-color var(--t-fast) var(--ease-snap); }
.at-preset:hover { border-left-color: var(--v-sky); }
.at-preset strong { display: block; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .95rem;
                    text-transform: uppercase; letter-spacing: .02em; }
.at-preset small { color: var(--v-text-muted); font-size: .8rem; }
.at-group-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.at-optional { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .72rem; font-weight: 700;
               color: var(--v-sky); text-transform: uppercase; letter-spacing: .06em; }
.at-options { display: grid; gap: 1px; background: var(--v-line); border: 1px solid var(--v-line); }
.at-family { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .76rem; text-transform: uppercase;
             letter-spacing: .08em; color: var(--v-sky); font-weight: 700; margin: 0; padding: .5rem .85rem; background: var(--v-canvas); }
.at-opt { display: block; cursor: pointer; padding: .8rem .85rem; background: var(--v-canvas); border-left: 3px solid transparent;
          position: relative; transition: border-color var(--t-fast) var(--ease-snap), background var(--t-fast) var(--ease-snap); }
.at-opt:hover { border-left-color: var(--v-line-hover); }
.at-opt.on { border-left-color: var(--v-sky); background: var(--v-surface-1); }
.at-opt input { position: absolute; opacity: 0; pointer-events: none; }
.at-opt-top { display: flex; align-items: center; gap: .6rem; }
.at-opt-name { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 1rem;
               text-transform: uppercase; letter-spacing: .02em; flex: 1; min-width: 0; }
.at-opt-code { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .78rem; color: var(--v-sky); font-weight: var(--w-semi); }
.at-opt-note { display: block; color: var(--v-text-muted); font-size: .85rem; margin-top: .35rem; line-height: 1.5; }
.at-opt.on .at-opt-note { color: var(--v-text); }
.at-sub { display: grid; gap: .85rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--v-line);
          grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.at-sub:empty { display: none; }
.at-skip { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; padding-top: .7rem;
           border-top: 1px solid var(--v-line); font-size: .85rem; cursor: pointer; }
.at-skip input { width: auto; margin: 0; }
.at-block.off .at-options, .at-block.off .at-sub { opacity: .35; pointer-events: none; }
.at-block.off .at-group-head h2::after {
  content: "ΔΕΝ ΜΠΑΙΝΕΙ"; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; color: var(--v-sky); border: 1px solid var(--v-sky); padding: .1rem .35rem;
  margin-left: .5rem; vertical-align: middle; white-space: nowrap;
}
.at-warn { color: var(--v-text); border-left: 3px solid var(--v-amber); padding: .4rem .6rem; background: var(--v-surface-2);
           font-size: .85rem; grid-column: 1 / -1; }
/* ⚠️ Η παγίδα του [hidden]: η μπάρα έχει δικό της display — χωρίς αυτό
   έμενε ορατή και στο ιστορικό (το πάθαμε στην πρώτη δοκιμή). */
.at-bar[hidden], #at-quote[hidden], #at-list[hidden], #at-old[hidden], #at-build[hidden] { display: none !important; }
.at-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; margin-top: 1rem;
  background: var(--v-canvas); border-top: 2px solid var(--v-sky);
}
.at-bar-k { display: block; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .72rem;
            color: var(--v-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.at-bar-v { font-size: 1.2rem; font-weight: var(--w-bold); }
/* Το αποτέλεσμα */
.at-q-line { background: var(--v-surface-1); border: 1px solid var(--v-line); padding: .8rem 1rem; margin-bottom: 1px; }
.at-q-top { display: flex; align-items: baseline; gap: .6rem; }
.at-q-name { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 700; flex: 1; min-width: 0;
             font-size: .98rem; text-transform: uppercase; letter-spacing: .02em; }
.at-q-qty { font-weight: var(--w-bold); white-space: nowrap; font-size: 1rem; }
.at-q-meta { color: var(--v-text-muted); font-size: .84rem; margin-top: .3rem; }
.at-q-note { margin-top: .6rem; padding: .5rem .7rem; font-size: .83rem; line-height: 1.5;
             border-left: 3px solid var(--v-line); background: var(--v-canvas); color: var(--v-text-muted); }
.at-q-block { background: var(--v-surface-1); border: 1px solid var(--v-line); padding: 1rem; margin: 1rem 0; }
.at-q-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .4rem 0; font-size: .95rem; }
.at-q-row + .at-q-row { border-top: 1px solid var(--v-line); }
.at-q-row .k { color: var(--v-text-muted); font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
               text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; }
.at-q-row.total { border-top: 2px solid var(--v-sky); margin-top: .5rem; padding-top: .75rem; font-size: 1.1rem; font-weight: var(--w-bold); }
.at-ladder { border: 1px solid var(--v-line); margin: 1rem 0; }
.at-ladder-now { padding: .8rem 1rem; font-size: .88rem; color: var(--v-text-muted); }
.at-ladder-now strong { display: block; margin-bottom: .2rem; color: var(--v-text);
                        font-family: "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.at-ladder-next { padding: .75rem 1rem; font-size: .9rem; line-height: 1.5; border-top: 1px solid var(--v-line); }
.at-ladder.has-next { border-color: var(--v-sky); }
.at-ladder.has-next .at-ladder-next { background: var(--v-surface-1); border-top-color: var(--v-sky); border-left: 3px solid var(--v-lime); }
.at-ladder-next b { color: var(--v-text); }
.at-ladder-next.max { color: var(--v-text); }
.at-hist { display: block; width: 100%; appearance: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
           border-radius: 0; margin-bottom: .5rem; }
.at-hist:hover { border-color: var(--v-sky); }
.at-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.at-actions .primary, .at-actions .secondary { display: block; width: 100%; text-align: center; box-sizing: border-box; text-decoration: none; }
.at-toast { position: fixed; left: 50%; bottom: 5.4rem; transform: translateX(-50%); z-index: 60; max-width: 90vw; }

@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 104px; }
  .home-cols { grid-template-columns: 1fr; }
}
.eyebrow { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-muted); }

/* ══════════════════════════════════════════════════════════════════
   ΓΛΩΣΣΑ ΤΟΥ CREDIT CONTROL COCKPIT ΜΕΣΑ ΣΤΗ ΒΙΤΡΙΝΑ (10/09/2026)
   Εντολή Στέφανου: «θέλω να έχει και το design του cockpit — να το
   ακολουθεί» και «η καρτέλα πελάτη να λειτουργεί όπως στο cockpit».
   Μεταφέρθηκαν ΑΥΤΟΥΣΙΑ τα στοιχεία του Design System v3 του Cockpit
   (~/Desktop/Apps/credit-dashboard/static/style.css): κάρτα με τετράγωνη
   κουκκίδα στον τίτλο, KPI με ετικέτα-δεδομένων/μεγάλο αριθμό/ένδειξη,
   hero KPI 6px, βιομηχανικός πίνακας με μαύρη κεφαλίδα και ζέβρα, λίστα
   προτεραιότητας «οι 10 της ημέρας» με αριθμό-τετράγωνο και badge
   έντασης, alert-item με λωρίδα και κουκκίδα, καρτέλα πελάτη με
   cust-head / info-grid / mini-bars / usage-bar, σελιδοποίηση.
   Ισχύει ΜΟΝΟ μέσα σε .cc (Αρχική και Πελάτες της βιτρίνας) — η
   VERNILAC και το Support δεν αγγίζονται. Χρώματα ΜΟΝΟ από tokens:
   επιφάνειες από το θέμα (--v-*), δεδομένα από τα --cc-* του Cockpit.
   ══════════════════════════════════════════════════════════════════ */
/* Το φόντο της σελίδας: «mist» με λευκές κάρτες, όπως στο Cockpit —
   στο σκούρο θέμα αντιστρέφεται από τα ίδια tokens. */
body.dash main { background: var(--v-surface-2); }
body.dash main > #view-chat { background: transparent; }

.cc .dash-title { font-family: var(--display); font-size: 27px; letter-spacing: .02em; }
/* Το «rule» του Cockpit: κοντή γραμμή έμφασης κάτω από τον τίτλο */
.cc .dash-title::after { content: ''; display: block; width: 46px; height: 4px; background: var(--v-sky); margin-top: 8px; }
/* Μόνο το rule ΚΑΤΩ από τον τίτλο, όπως στο Cockpit — όχι και η μαύρη ράχη από πάνω */
.cc .dash-title::before { display: none; }
.cc-card > h3, .cc-h3 { flex-wrap: wrap; }
.cc .dash-when { font-family: var(--cc-data); font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--v-text-muted); line-height: 1.9; }
.cc .dash-head { align-items: flex-end; }

/* ── Κάρτα ── */
.cc-card { background: var(--v-canvas); border: 1px solid var(--v-line); padding: 20px 22px; margin-bottom: 16px; }
.cc-card > h3, .cc-h3 { font-family: var(--display); font-size: 14px; margin: 0 0 12px; font-weight: 700;
  color: var(--v-text); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 9px; }
.cc-card > h3::before, .cc-h3::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--v-sky); flex: none; }
.cc-card > h3 .muted, .cc-h3 .muted { font-family: var(--font); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--v-text-muted); font-size: 13px; }
.cc-muted { color: var(--v-text-muted); font-size: 13px; }
.cc-note { color: var(--v-text-muted); font-size: 12.5px; margin-top: 10px; border-left: 3px solid var(--v-line); padding-left: 10px; }
.cc-empty { color: var(--v-text-muted); text-align: center; padding: 32px 0; font-size: 15px; }
.cc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cc-row.between { justify-content: space-between; }

/* ── KPI ── */
.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cc-kpi { background: var(--v-canvas); border: 1px solid var(--v-line); border-top: 3px solid var(--v-text); padding: 16px 18px; position: relative; overflow: hidden; }
.cc-kpi .t { font-family: var(--cc-data); font-size: 10.5px; font-weight: 500; color: var(--cc-ink-2); text-transform: uppercase; letter-spacing: .12em; line-height: 1.4; }
.cc-kpi.hero { grid-column: span 2; border-top: 6px solid var(--v-sky); }
.cc-kpi .v { font-family: var(--display); font-size: 30px; font-weight: 700; margin: 8px 0 6px; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; color: var(--v-text); }
.cc-kpi.hero .v { font-size: 40px; }
.cc-kpi .d { font-family: var(--cc-data); font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; padding: 2px 8px; margin: 1px 0 3px; }
.cc-kpi .d.good { color: var(--cc-good); background: var(--cc-good-bg); }
.cc-kpi .d.bad { color: var(--cc-bad); background: var(--cc-bad-bg); }
.cc-kpi .d.neutral { color: var(--cc-ink-2); background: var(--cc-chip); }
.cc-kpi .sub { font-size: 12.5px; color: var(--cc-ink-2); margin-top: 4px; line-height: 1.45; }
@media (max-width: 640px) { .cc-kpi.hero { grid-column: auto; } }

/* «Δ/Υ» = Δεν Υπάρχει (το μέγεθος δεν τηρείται για την εταιρεία) */
.cc-na { font-family: var(--cc-data); font-size: .78em; font-weight: 500; color: var(--cc-ink-2); background: var(--cc-chip); padding: 1px 6px; letter-spacing: .06em; cursor: help; vertical-align: 2px; }
.cc-kpi .v .cc-na { font-size: 15px; vertical-align: 4px; }

/* ── Badges ── */
.cc-badge { display: inline-block; padding: 2px 9px; font-family: var(--cc-data); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.cc-badge.red { background: var(--cc-bad); color: var(--v-paper); }
.cc-badge.orange { background: var(--cc-warn-bg); color: var(--cc-warn); border: 1px solid var(--cc-warn-line); }
.cc-badge.green { background: var(--cc-good-bg); color: var(--cc-good); border: 1px solid var(--cc-good-line); }
.cc-badge.gray { background: var(--cc-chip); color: var(--cc-ink-2); }
.cc-badge.blue { background: var(--v-text); color: var(--v-canvas); }
/* Ένταση υπέρβασης — τέσσερα σκαλοπάτια, όχι όλα το ίδιο κόκκινα */
.cc-ex { font-family: var(--cc-data); font-size: 11px; font-weight: 500; padding: 1px 7px; flex: none; white-space: nowrap; }
.cc-ex.x0 { background: var(--cc-chip); color: var(--cc-ink-2); }
.cc-ex.x1 { background: var(--cc-warn-bg); color: var(--cc-warn); }
.cc-ex.x2 { background: var(--cc-bad-bg); color: var(--cc-bad); }
.cc-ex.x3 { background: var(--cc-bad); color: var(--v-paper); }

/* ── «Οι 10 της ημέρας» — αριθμημένη λίστα προτεραιότητας ── */
ol.cc-top10 { list-style: none; counter-reset: t; margin: 0; padding: 0; }
ol.cc-top10 li { counter-increment: t; display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--v-line); transition: background var(--t-fast) ease; }
ol.cc-top10 li[data-code] { cursor: pointer; }
ol.cc-top10 li:last-child { border-bottom: 0; }
ol.cc-top10 li[data-code]:hover { background: var(--v-surface-2); }
ol.cc-top10 .rk::before { content: counter(t); font-family: var(--cc-data); font-size: 12px; color: var(--v-paper); background: var(--v-text); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] ol.cc-top10 .rk::before { color: var(--v-canvas); }
ol.cc-top10 li:nth-child(-n+3) .rk::before { background: var(--cc-bad); color: var(--v-paper); }
ol.cc-top10 .nm { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.cc-top10 .nm small { display: block; font-weight: 400; font-size: 12px; color: var(--v-text-muted); overflow: hidden; text-overflow: ellipsis; }
ol.cc-top10 .nm small em { font-style: normal; font-family: var(--cc-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink-2); }
ol.cc-top10 .nm small .cc-ex { vertical-align: middle; }
ol.cc-top10 .rl { font-family: var(--cc-data); font-size: 10.5px; color: var(--cc-ink-2); text-transform: uppercase; letter-spacing: .06em; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
ol.cc-top10 .rl > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }   /* 13/09 (σημείο 19): μία γραμμή ανά ειδοποίηση (κανόνας + υπέρβαση), όχι «2 ειδοποιήσεις» */
ol.cc-top10 .am { font-family: var(--display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; flex: none; min-width: 92px; text-align: right; }
ol.cc-top10.compact li { padding: 7px 4px; }
@media (max-width: 620px) { ol.cc-top10 .rl { display: none; } ol.cc-top10 .am { min-width: 0; } }
/* 16/09 ι — ΤΑΜΠΛΕΤΑ (621-1000, όπου το αριστερό μενού των 248px αφήνει ~430px): η επωνυμία στριμωχνόταν στα 109px
   ενώ ο κανόνας έπιανε 160. Τώρα η γραμμή σπάει: επωνυμία σε όλο το πλάτος, κανόνας + ποσό από κάτω. */
@media (min-width: 621px) and (max-width: 1000px) {
  ol.cc-top10 li { flex-wrap: wrap; row-gap: 4px; }
  ol.cc-top10 .nm { flex: 1 1 calc(100% - 34px); }
  ol.cc-top10 .rl { flex: 1 1 auto; align-items: flex-start; padding-left: 34px; }
  ol.cc-top10 .am { margin-left: auto; }
}

/* ── Alert item: λωρίδα κατάστασης αριστερά, τετράγωνη κουκκίδα ── */
.cc-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; border: 1px solid var(--v-line); }
.cc-alert.crit { background: var(--cc-bad-bg); border-color: var(--cc-bad-line); border-left: 4px solid var(--cc-bad); }
.cc-alert.warn { background: var(--cc-warn-bg); border-color: var(--cc-warn-line); border-left: 4px solid var(--cc-warn); }
.cc-alert .dot { flex-shrink: 0; margin-top: 6px; width: 8px; height: 8px; }
.cc-alert.crit .dot { background: var(--cc-bad); }
.cc-alert.warn .dot { background: var(--cc-warn); }
.cc-alert .txt { flex: 1; min-width: 0; }
.cc-alert .meta { font-family: var(--cc-data); font-size: 11px; color: var(--cc-ink-2); margin-top: 3px; letter-spacing: .02em; }

/* ── Πίνακας: βιομηχανικός — μαύρη κεφαλίδα, ζέβρα, μηδέν καμπύλες ── */
.cc-scroll { overflow-x: auto; max-height: 72vh; overflow-y: auto; border: 1px solid var(--v-line); }
table.cc-data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cc-data th { text-align: left; padding: 10px 12px; color: var(--v-paper); font-family: var(--display); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; background: var(--cc-th); white-space: nowrap; position: sticky; top: 0; z-index: 2; border: 0; }
:root[data-theme="dark"] table.cc-data th { background: var(--v-surface-2); border-bottom: 1px solid var(--v-line); }
/* ⚠️ Το γενικό `th, td { text-align: right }` της εφαρμογής θα στοίχιζε δεξιά και τα ονόματα */
table.cc-data th, table.cc-data td { text-align: left; }
table.cc-data td { padding: 9px 12px; border-bottom: 1px solid var(--v-line); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background var(--t-fast) ease; }
table.cc-data tbody tr:nth-child(even) td { background: var(--v-surface-2); }
table.cc-data tr.clickable { cursor: pointer; }
table.cc-data tr.clickable:hover td { background: color-mix(in srgb, var(--v-sky) 12%, var(--v-canvas)); }
table.cc-data td.num, table.cc-data th.num { text-align: right; }
table.cc-data td.cell-bad { background: var(--cc-bad-bg) !important; color: var(--cc-bad); font-weight: 700; }
table.cc-data td.cell-warn { background: var(--cc-warn-bg) !important; color: var(--cc-warn); font-weight: 700; }
table.cc-data td.cell-good { color: var(--cc-good); font-weight: 600; }
table.cc-data td.mono { font-family: var(--cc-data); font-size: 12px; }
table.cc-data td.wrap { white-space: normal; }
table.cc-data th.sortable { cursor: pointer; user-select: none; position: sticky; padding-right: 20px; }
table.cc-data th.sortable:hover { background: var(--v-sky); color: var(--v-paper); }
table.cc-data th.sortable::after { content: '⇅'; position: absolute; right: 6px; opacity: .45; font-size: 10px; }
table.cc-data th.sort-asc::after { content: '↑'; opacity: 1; }
table.cc-data th.sort-desc::after { content: '↓'; opacity: 1; }
@media (hover: none) { table.cc-data tr.clickable:hover td { background: inherit; } }

/* ── Φίλτρα (η γραμμή φίλτρων του Cockpit) ── */
.cc-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 12px; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); }
.cc-filter input, .cc-filter select { padding: 8px 11px; border: 1px solid var(--v-line); font-size: 14px; background: var(--v-canvas); color: var(--v-text); font-family: var(--font); margin: 0; }
.cc-filter input { flex: 1 1 260px; min-width: 200px; }
.cc-filter select { max-width: 300px; width: auto; }
.cc-filter input:focus, .cc-filter select:focus { outline: 2px solid var(--v-sky); outline-offset: -2px; border-color: var(--v-sky); }
.cc-chip { background: var(--cc-chip); color: var(--v-text); border-left: 3px solid var(--v-sky); padding: 4px 11px; font-family: var(--cc-data); font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }

/* ── Κουμπιά του Cockpit: Roboto Condensed, ΚΕΦΑΛΑΙΑ, τετράγωνα ── */
.cc-btn { display: inline-block; background: var(--v-sky); color: var(--v-paper); border: 0; padding: 10px 20px; font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em; cursor: pointer; text-decoration: none; text-align: center; border-radius: 0; min-height: 0;
  transition: background var(--t-fast) var(--ease-snap), transform var(--t-fast) var(--ease-snap); }
.cc-btn:hover { background: var(--atl-orange-hover, var(--v-text)); }
.cc-btn:active { transform: scale(.97); }
/* Η παγίδα του [hidden] (10/09): το inline-block νικούσε το hidden και το «Διαγραφή προχείρου»
   φαινόταν ΠΑΝΤΑ — και σε νέα παραγγελία χωρίς id, όπου το κλικ δεν έκανε τίποτα. */
.cc-btn[hidden] { display: none !important; }
.cc-btn.ghost { background: transparent; color: var(--v-text); border: 1px solid var(--v-text); }
.cc-btn.ghost:hover { background: var(--v-text); color: var(--v-canvas); }
.cc-btn.small { padding: 6px 13px; font-size: 12px; letter-spacing: .08em; }

/* ── Σελιδοποίηση ── */
.cc-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cc-pager .pg { border: 1px solid var(--v-line); background: var(--v-canvas); cursor: pointer; padding: 7px 12px; font-family: var(--cc-data); font-size: 12px; color: var(--cc-ink-2); min-width: 38px; border-radius: 0; min-height: 0;
  transition: border-color var(--t-fast) var(--ease-snap), color var(--t-fast) var(--ease-snap); }
.cc-pager .pg:hover:not(:disabled) { border-color: var(--v-text); color: var(--v-text); }
.cc-pager .pg.on { background: var(--v-sky); color: var(--v-paper); border-color: var(--v-sky); }
.cc-pager .pg:disabled { opacity: .35; cursor: default; }
.cc-pager .gap { color: var(--v-text-muted); font-family: var(--cc-data); font-size: 12px; padding: 0 2px; }

/* ── Καρτέλα πελάτη (όπως στο Cockpit) ── */
.cc-cust-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cc-cust-head .nm { font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; color: var(--v-text); }
.cc-cust-head .nm .cc-badge { margin-left: 8px; letter-spacing: .06em; }
.cc-cust-head .cd { font-family: var(--cc-data); color: var(--cc-ink-2); font-size: 12px; margin-top: 6px; letter-spacing: .02em; }
.cc-cust-head .contact-line { margin-top: 10px; background: var(--cc-chip); border-left: 3px solid var(--v-sky); padding: 7px 12px; display: inline-block; color: var(--v-text); font-size: 13.5px; font-family: var(--font); letter-spacing: 0; }
.cc-cust-head .contact-line a { font-weight: 700; color: var(--v-text); text-decoration-color: var(--v-sky); }
.cc-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1px; margin-top: 18px; background: var(--v-line); border: 1px solid var(--v-line); }
.cc-info-grid > div { background: var(--v-canvas); padding: 12px 14px; }
.cc-info-grid .lbl { font-family: var(--cc-data); font-size: 10px; font-weight: 500; color: var(--cc-ink-2); text-transform: uppercase; letter-spacing: .12em; line-height: 1.4; }
.cc-info-grid .val { font-family: var(--display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1.1; color: var(--v-text); }
.cc-info-grid .val.bad { color: var(--cc-bad); }
.cc-info-grid .val.warn { color: var(--cc-warn); }
.cc-mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; margin-top: 10px; }
.cc-mini-bars .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; font-family: var(--cc-data); font-size: 9.5px; color: var(--cc-ink-2); height: 100%; text-align: center; min-width: 0; }
.cc-mini-bars .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cc-mini-bars .bar .lb { display: block; overflow: visible; }
.cc-mini-bars .bar .lb b { display: block; font-weight: var(--w-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mini-bars .bar .lb em { display: block; font-style: normal; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .cc-mini-bars .bar .lb em { display: none; } }   /* 16/09 ι: στήλες 43-56px — μένει μόνο ο μήνας */
.cc-mini-bars .bar i { display: block; width: 100%; background: var(--v-sky); min-height: 2px; }
.cc-mini-bars .bar.old i { background: var(--cc-warn); }
.cc-mini-bars .bar.oldest i { background: var(--cc-bad); }
.cc-usage { height: 10px; background: var(--v-line); overflow: hidden; margin-top: 8px; }
.cc-usage i { display: block; height: 100%; background: var(--cc-good); }
.cc-usage i.warn { background: var(--cc-warn); }
.cc-usage i.bad { background: var(--cc-bad); }
/* Πορεία υπολοίπου: γραμμή σε SVG (καμία βιβλιοθήκη — NIS2, μηδέν CDN) */
.cc-chart { width: 100%; height: auto; display: block; }
.cc-chart .grid { stroke: var(--v-line); stroke-width: 1; }
.cc-chart .lbl { font-family: var(--cc-data); font-size: 10px; fill: var(--cc-ink-2); }
.cc-chart .ln-bal { fill: none; stroke: var(--v-sky); stroke-width: 2.5; stroke-linejoin: round; }
.cc-chart .ar-bal { fill: var(--v-sky); opacity: .12; }
.cc-chart .ln-m7 { fill: none; stroke: var(--cc-bad); stroke-width: 2; stroke-linejoin: round; }
.cc-chart .pt-bal { fill: var(--v-sky); }
.cc-chart .pt-m7 { fill: var(--cc-bad); }
.cc-chart .ln-plafon { fill: none; stroke: var(--v-text); stroke-width: 1.5; stroke-dasharray: 6 4; }      /* 13/09 (σημείο 19): γραμμή ΠΛΑΦΟΝ */
.cc-chart .ln-diam { fill: none; stroke: var(--cc-warn); stroke-width: 2; stroke-dasharray: 3 3; stroke-linejoin: round; }   /* διαμορφωμένο πλαφόν */
.cc-chart .pt-diam { fill: var(--cc-warn); }
.cc-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--cc-ink-2); margin-bottom: 6px; }
.cc-legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; background: var(--v-sky); }
.cc-legend i.m7 { background: var(--cc-bad); }
.cc-legend i.plafon { background: var(--v-text); height: 2px; }
.cc-legend i.diam { background: var(--cc-warn); }
.cc-legend small { color: var(--v-text-faint); font-size: 11px; font-weight: 400; }

/* Τα κουτάκια της Αρχικής ως κάρτες του Cockpit: λευκό, 1px γραμμή, 3px
   μαύρη ακμή, στο hover μαύρο περίγραμμα (η «σκιά» του Cockpit) */
.cc .tile { background: var(--v-canvas); border-top-color: var(--v-text); }
.cc .tile:hover { background: var(--v-canvas); box-shadow: 0 0 0 1px var(--v-text); }
.cc .tile.aqua { border-top-color: var(--atl-aqua, var(--v-sky)); }
.cc .tile.ink { border-top-color: var(--v-sky); }
.cc .tile.ink .ic { color: var(--v-sky); }
.cc .tile .ic { color: var(--v-text); }
.cc .tile.aqua .ic { color: var(--atl-aqua, var(--v-sky)); }
.cc .home-cols .card, .cc .home-panel { background: var(--v-canvas); }
.cc .card h2 { font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cc .card h2::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--v-sky); margin-right: 9px; vertical-align: 1px; }

/* ── Παραγγελίες (10/09/2026) — πάνω στη γλώσσα του Cockpit ── */
.ord-results { max-height: 42vh; }
.ord-results table.cc-data td.act { width: 1%; }
.ord-results .cc-btn.small { padding: 4px 10px; }
.ord-qty { width: 6.5em; padding: 6px 8px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text);
  font-family: var(--cc-data); font-size: 14px; text-align: right; margin: 0; }
.ord-qty.bad { border-color: var(--cc-bad); background: var(--cc-bad-bg); color: var(--cc-bad); }
.ord-qty-hint { display: block; font-family: var(--cc-data); font-size: 10.5px; color: var(--cc-ink-2); margin-top: 3px; white-space: nowrap; }
.ord-qty-hint.bad { color: var(--cc-bad); }
table.cc-data tr.ord-total td { font-weight: 700; background: var(--v-surface-2); border-top: 2px solid var(--v-text); }
.ord-cust-wrap input { width: 100%; max-width: 520px; margin: 0; }
.ord-x { background: none; border: 0; color: var(--cc-ink-2); cursor: pointer; padding: 2px 6px; min-height: 0; display: inline-flex; align-items: center; flex: none; }
.ord-x svg { display: block; }
.ord-x:hover { color: var(--cc-bad); }
#ord-note { width: 100%; max-width: 720px; }
.cc-status { display: inline-block; padding: 2px 9px; font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.cc-status.draft { background: var(--cc-warn-bg); color: var(--cc-warn); border: 1px solid var(--cc-warn-line); }
.cc-status.sent { background: var(--cc-good-bg); color: var(--cc-good); border: 1px solid var(--cc-good-line); }
@media (max-width: 620px) { .ord-results { max-height: 50vh; } }

/* ── Eshop παραγγελιών (10/09/2026): κάρτες με φωτογραφία, καρτέλα, καλάθι στο πλάι ── */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }   /* 16/09 ι: 420 → 380 — τα 40px πήγαν στις γραμμές συσκευασίας, ώστε όνομα+τιμή+χειριστήρια να χωρούν σε ΜΙΑ αράδα */
/* Καλάθι σε ΜΠΛΟΚ ανά είδος — χωράει σε 400px χωρίς οριζόντια κύλιση (εντολή Στέφανου 10/09) */
.ord-line { border: 1px solid var(--v-line); border-left: 3px solid var(--v-line); padding: 8px 10px; margin-bottom: 8px; background: var(--v-canvas); }
.ord-line.bad { border-left-color: var(--cc-bad); }
.ord-line-head { display: flex; align-items: flex-start; gap: 8px; }
.ord-line-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ord-line-name b { font-size: 14px; }
.ord-line-name .cc-muted { font-family: var(--cc-data); font-size: 11.5px; }
.ord-line-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ord-line-cells > * { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ord-line-cells > * > span:first-child { font-family: var(--cc-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink-2); }
.ord-line-cells b { font-family: var(--display); font-size: 15px; line-height: 30px; white-space: nowrap; }
.ord-line-cells .ord-qty, .ord-line-cells .ord-disc { width: 100%; min-width: 0; height: 30px; padding: 0 6px; }
.ord-line-cells .ord-disc-wrap { display: flex; align-items: center; gap: 2px; }
/* 17/09 στ: δύο εκπτώσεις στο ΙΔΙΟ κελί (1 + 2), ώστε να μείνουν τα τέσσερα κελιά της γραμμής */
.ord-line-cells .ord-disc-wrap .ord-disc { flex: 1 1 0; width: auto; padding: 0 3px; text-align: center; }
.ord-disc-plus { font-family: var(--cc-data); font-size: 12px; color: var(--cc-ink-2); flex: none; }
.ord-line-cells .ord-qty-hint { white-space: normal; line-height: 1.2; }
.ord-line.ord-sum { background: var(--v-surface-2); border-left-color: var(--v-text); border-top: 2px solid var(--v-text); }
.ord-line.ord-sum .ord-line-cells { margin-top: 0; }
.ord-net { color: var(--v-text); }
@media (max-width: 1100px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } }   /* minmax(0,…): με σκέτο 1fr η στήλη φούσκωνε στα 590px από τα chips */
.shop-main { min-width: 0; container-type: inline-size; container-name: shop; }   /* 16/09 ι: ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΣΤΗΛΗΣ κρίνει τη διάταξη του eshop, ΟΧΙ της οθόνης — σε ταμπλέτα το μενού των 248px άφηνε 473px ενώ το media query νόμιζε 768 */
.ord-sheet-head, .ord-bar { display: none; }   /* μόνο σε κινητό */
/* Το καλάθι κυλάει ΜΟΝΟ ΤΟΥ (εντολή Στέφανου 10/09: «δεν κάνει εύκολα το slide down μέσα στην παραγγελία,
   μπερδεύεται με τα προϊόντα»): κολλητό, με ύψος όσο η οθόνη κάτω από την κεφαλίδα, δική του κατακόρυφη κύλιση,
   και overscroll-behavior: contain ώστε η ρόδα πάνω στο καλάθι να ΜΗΝ κυλάει τη λίστα προϊόντων. */
.shop-cart { position: sticky; top: 0; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 4px 8px 0; }
.shop-cart .cc-card { margin-bottom: 12px; }
/* 10/09 (β), Στέφανος: «δεν είναι εύκολο να κάνεις slide στο καλάθι, μπερδεύεται». Με 360 προϊόντα στη VERNILAC
   το καλάθι ολόκληρο κυλούσε μόνο του (χωρίς ορατή μπάρα) και το «Αποστολή» θαβόταν στο τέλος. Τώρα σε υπολογιστή:
   ΤΙΠΟΤΑ δεν κυλάει στο καλάθι εκτός από τη ΛΙΣΤΑ ΤΩΝ ΕΙΔΩΝ (#ord-lines), με ορατή λεπτή μπάρα· πελάτης, σύνολο,
   σημείωση και τα κουμπιά μένουν ΠΑΝΤΑ στη θέση τους. Το ίδιο ισχύει και στην ATLACOLL. */
@media (min-width: 1101px) {
  /* 100vh − κεφαλίδα − τίτλος σελίδας: ώστε τα κουμπιά να φαίνονται ΚΑΙ πριν κυλήσει η σελίδα (μετρήθηκε: με −92 έλειπαν 76px). */
  .shop-cart { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 172px); }
  .shop-cart > .cc-card:has(#ord-lines) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .shop-cart #ord-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
                          scrollbar-width: thin; scrollbar-color: var(--v-line) transparent; }
  .shop-cart #ord-lines::-webkit-scrollbar { width: 8px; }
  .shop-cart #ord-lines::-webkit-scrollbar-thumb { background: var(--v-line); }
  .shop-cart #ord-lines::-webkit-scrollbar-track { background: transparent; }
}
.shop-cart input, .shop-cart textarea { width: 100%; box-sizing: border-box; }
.shop-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* Τίτλος σειράς σε δύο γραμμές: πάνω το όνομα, κάτω «60xx ΣΕΙΡΑ» πιο έντονο (11/09/2026) */
.shop-series-top { display: block; font-weight: var(--w-med); }
.shop-series-sub { display: block; font-weight: var(--w-bold); font-size: 1.15em; letter-spacing: .02em; }
/* Σκληρυντές & «συνδυάζεται με» στην καρτέλα προϊόντος (11/09/2026) */
.shop-hardener { border-left: 3px solid var(--v-line); padding-left: 10px; margin: 8px 0 12px; }
.shop-ratio { font-family: var(--cc-data, var(--font-mono, monospace)); font-size: 12.5px; color: var(--v-text-muted); margin: 2px 0 6px; }
.shop-ratio span { white-space: nowrap; }
.shop-pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.shop-pairs .cc-chip { cursor: pointer; }
.shop-actions .cc-btn { width: 100%; }
.shop-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.shop-cat { border: 1px solid var(--v-line); background: var(--v-canvas); cursor: pointer; padding: 5px 11px; font-family: var(--font);
  font-size: 12.5px; color: var(--v-text-muted); border-radius: 0; min-height: 0; transition: border-color var(--t-fast) var(--ease-snap), color var(--t-fast) var(--ease-snap); }
.shop-cat:hover { border-color: var(--v-text); color: var(--v-text); }
.shop-cat.on { background: var(--v-sky); color: var(--v-paper); border-color: var(--v-sky); }
.shop-cat b { font-family: var(--cc-data); font-weight: 500; margin-left: 5px; opacity: .7; }
.shop-cat[hidden] { display: none !important; }   /* η παγίδα του [hidden]: το κουμπί έχει δικό του display */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.shop-card { appearance: none; font: inherit; color: var(--v-text); text-align: left; cursor: pointer; border-radius: 0; min-height: 0;
  background: var(--v-canvas); border: 1px solid var(--v-line); padding: 0; display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease-snap); }
.shop-card:hover { box-shadow: 0 0 0 1px var(--v-text); }
.shop-card.on { box-shadow: 0 0 0 2px var(--v-sky); }
.shop-img { height: 150px; background: var(--v-paper); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--v-line); overflow: hidden; }
.shop-img img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
.shop-img .noimg { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--v-line-hover); text-transform: uppercase; letter-spacing: .04em; padding: 0 12px; text-align: center; }
/* Χωρίς φωτογραφία: ο ίδιος τίτλος δύο γραμμών και στο κουτί της εικόνας — γράμματα πάνω (ελαφρύτερα), αριθμός/ΣΕΙΡΑ κάτω (έντονα) — εντολή Στέφανου 11/09 */
.shop-img .noimg .shop-series-top { font-weight: var(--w-med); font-size: .78em; letter-spacing: .06em; }
.shop-img .noimg .shop-series-sub { font-size: 1.15em; font-weight: 700; }
.shop-pk-row.is-set { border-left: 3px solid var(--v-sky); background: var(--v-surface-2); }
.shop-set { display: flex; flex-direction: column; gap: 0; margin: 0 0 12px; border-left: 3px solid var(--v-sky); container-type: inline-size; container-name: pkrow; }
.shop-set .shop-pk-row { border-left: 0; }
.shop-set .shop-pk-row + .shop-pk-row { border-top: 0; }
/* Πτυσσόμενες ομάδες σετ ανά παραλλαγή Α (13/09): native <details>, η πρώτη ανοιχτή. Το βελάκι από περίγραμμα, όχι εικονίδιο. */
.shop-set-group { margin: 0 0 8px; border: 1px solid var(--v-line); }
.shop-set-group > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; background: var(--v-surface-2); user-select: none; }
.shop-set-group > summary::-webkit-details-marker { display: none; }
.shop-set-group > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--v-text); border-bottom: 2px solid var(--v-text); transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-snap, ease-out); flex: none; }
.shop-set-group[open] > summary::before { transform: rotate(45deg); }
.shop-set-group > summary .shop-variant { margin: 0; padding: 0; border: 0; background: none; flex: 1; }
.shop-set-group > summary:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }
.shop-set-group > .shop-set { margin: 0; border-left-width: 3px; }
.shop-set-group > .shop-set + .shop-set { border-top: 1px solid var(--v-line); }
.shop-shade-group { margin-top: 8px; }
.shop-shade-title { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-text-muted); margin: 6px 0 4px; }
.shop-shades { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-shade { border: 1px solid var(--v-line); background: var(--v-surface-1); color: var(--v-text); padding: 4px 9px; font-size: .82rem; cursor: pointer; font-family: var(--font); transition: border-color var(--t-fast), background var(--t-fast); }
.shop-shade b { font-family: var(--cc-data); font-weight: var(--w-semi); }
.shop-shade:hover { border-color: var(--v-text); }
.shop-shade.on { border-color: var(--v-sky); box-shadow: inset 0 0 0 1px var(--v-sky); }
/* Μη συμβατές με την επιλεγμένη απόχρωση (13/09, δεύτερη γραφή: «ας βγάζει τελείως όσα δεν είναι compatible»):
   ΚΡΥΒΟΝΤΑΙ όσο υπάρχει απόχρωση, ξαναεμφανίζονται με «× καμία». !important: οι γραμμές έχουν δικό τους display. */
.shop-pk-row.is-off, .shop-set.is-off, .shop-variant.is-off, .shop-set-group.is-off { display: none !important; }
.shop-shade-note { color: var(--v-text-muted); }
/* 16/09: Metallizzati / Modern & Classic ως drop-down (σημεία 1, 10) */
.shop-shade-select { max-width: 100%; padding: 6px 8px; border: 1px solid var(--v-line); background: var(--v-surface-1); color: var(--v-text); font: inherit; font-size: .85rem; border-radius: 0; }
.shop-shade-select:focus { outline: 2px solid var(--v-focus); outline-offset: 1px; }
/* 16/09 (σημείο 3): η γραμμή που μόλις μπήκε/άλλαξε στο καλάθι ανάβει για λίγο */
.ord-line.is-hit { box-shadow: inset 3px 0 0 var(--v-sky); }
.shop-img .noimg .shop-mix { display: block; margin-top: 8px; font-family: var(--cc-data); font-style: normal; font-weight: var(--w-med); font-size: .5em; letter-spacing: .02em; text-transform: none; color: var(--v-text-muted); white-space: normal; }
.shop-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-name { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
/* 16/09 γ: η κλάση του τιμοκαταλόγου ATLACOLL («1-30», «C2TE S1») δίπλα στο όνομα, πιο διακριτική */
.shop-cls { font-weight: 500; color: var(--v-text-muted); white-space: nowrap; }
.shop-tag { font-size: 12.5px; color: var(--v-text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-meta { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-family: var(--cc-data); font-size: 11px; color: var(--cc-ink-2); }
.shop-meta b { font-family: var(--display); font-size: 15px; color: var(--v-text); }
.shop-badges { display: flex; gap: 4px; flex-wrap: wrap; }
/* Καρτέλα προϊόντος (ανοίγει ΠΑΝΩ από το πλέγμα, όπως η καρτέλα αιτήματος κάτω από τη γραμμή) */
.shop-detail { border: 2px solid var(--v-sky); background: var(--v-canvas); padding: 16px; margin-bottom: 14px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
@media (max-width: 720px) { .shop-detail { grid-template-columns: 1fr; } }
/* 16/09 ι (Στέφανος: «τα θέλω σε μια σειρά»): οι συσκευασίες βγήκαν ΚΑΤΩ ΑΠΟ ΤΗ ΦΩΤΟΓΡΑΦΙΑ, σε όλο το πλάτος της
   καρτέλας — με τη φωτογραφία των 220px δίπλα τους η γραμμή έμενε ~550px και τα χειριστήρια δεν χωρούσαν σε μία αράδα. */
.shop-pkwrap { grid-column: 1 / -1; min-width: 0; }
.shop-detail .shop-img { height: 220px; border: 1px solid var(--v-line); }
.shop-detail h2 { font-family: var(--display); text-transform: uppercase; font-size: 22px; margin: 0 0 4px; letter-spacing: .01em; }
.shop-detail h2::before { content: none; }
.shop-detail .cd { font-family: var(--cc-data); font-size: 12px; color: var(--cc-ink-2); margin-bottom: 8px; }
.shop-detail p { font-size: 14px; line-height: 1.5; margin: 6px 0; max-width: 70ch; }
.shop-detail ul { margin: 6px 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.shop-detail .close { position: absolute; }
.shop-detail[hidden] { display: none !important; }   /* η παγίδα του [hidden]: το .shop-detail έχει display: grid — έμενε άδειο κουτί με πορτοκαλί περίγραμμα */
.shop-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.shop-variant { font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 4px; }
.shop-variant::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--v-sky); margin-right: 8px; }
/* Η παραλλαγή που ταίριαξε στην αναζήτηση (6045 μέσα στο 60xx): φωτίζεται και κυλάει σε αυτήν (11/09) */
.shop-variant.is-hit { border-left: 3px solid var(--v-sky); padding-left: 8px; margin-left: -11px; }
.shop-hit { font-size: 12px; color: var(--v-text-muted); margin: 2px 0 4px; }
.shop-hit::before { content: '→ '; color: var(--v-sky); }
/* Συσκευασίες στην καρτέλα προϊόντος: ΜΠΛΟΚ ανά συσκευασία (όχι πίνακας — σε κινητό δεν χωρούσε, 10/09/2026) */
/* 16/09 ι (Στέφανος: «οι γραμμές των προϊόντων άλλου μεγάλες άλλου μικρές — φτιάξ' τες με τον βέλτιστο τρόπο»):
   ΚΑΘΕ γραμμή συσκευασίας έχει την ΙΔΙΑ δομή — αράδα 1: μέγεθος + σήματα (ΧΡ, ΕΠ, «διάλεξε απόχρωση») ·
   αράδα 2: τιμή και συσκευασία · δεξιά: διακόπτης μονάδας, υπόδειξη, μετρητής, «Στο καλάθι» σε ΣΤΑΘΕΡΕΣ στήλες,
   ώστε να είναι στοιχισμένα κάθετα από γραμμή σε γραμμή. Το `grid-auto-rows: 1fr` ισοφαρίζει ό,τι περισσεύει. */
.shop-pk { display: grid; gap: 6px; grid-auto-rows: 1fr; margin: 4px 0 8px; container-type: inline-size; container-name: pkrow; }
.shop-pk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--v-line); background: var(--v-surface-1); }
.shop-pk-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 9em; }
.shop-pk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.shop-pk-meta { min-height: 18px; display: block; line-height: 1.35; }   /* 16/09 ι: ήταν flex — το <b> της τιμής και το υπόλοιπο κείμενο γίνονταν ΞΕΧΩΡΙΣΤΑ flex items και έσπαγαν σε 3 αράδες */
.shop-pk-size { font-family: var(--display); font-size: 15px; }
/* 16/09 ι: τα σήματα της γραμμής συσκευασίας πιο συμπαγή — με «ΕΙΔ. ΠΑΡΑΓΓΕΛΙΑ» έσπαγαν σε δεύτερη αράδα και η γραμμή
   έβγαινε 29px ψηλότερη από τις διπλανές της. */
.shop-pk-head .cc-badge { padding: 1px 5px; font-size: 9.5px; letter-spacing: .04em; }
.shop-pk-meta { font-family: var(--cc-data); font-size: 12px; color: var(--cc-ink-2); }
.shop-pk-meta b { color: var(--v-text); font-size: 14px; }
.shop-pk-act { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
/* 16/09 ι (Στέφανος: «τα θέλω σε μια σειρά — μίκρυνε το −1+, το Τεμάχια/Παλέτες και το Στο καλάθι»): όλα τα χειριστήρια
   της γραμμής συσκευασίας σε ΜΙΑ αράδα. Μετρημένο: διακόπτης 110 + υπόδειξη 10em + μετρητής 96 + κουμπί 96 + κενά = 425px,
   δηλαδή χωράει δίπλα στο όνομα/τιμή από ~620px πλάτους γραμμής και πάνω· κάτω από αυτό στοιβάζεται (container query). */
.shop-pk-act .shop-unit, .shop-pk-act .shop-unit-gap { flex: 0 0 128px; width: 128px; }
.shop-pk-act .shop-unit button { min-width: 0; flex: 1 1 0; font-size: 11px; padding: 5px 4px; letter-spacing: .02em; }
.shop-pk-act .cc-btn { flex: 0 0 auto; min-width: 92px; padding: .32rem .45rem; font-size: 11px; }
.shop-pk-act .shop-qty button { width: 26px; height: 28px; font-size: 15px; }
.shop-pk-act .shop-qty input { width: 3.9em; height: 28px; font-size: 13px; padding: 4px 1px; }
/* 16/09 στ (Στέφανος): διακόπτης → «= x κιβ.» δίπλα του (σταθερό πλάτος, ώστε το μακρύ «= 648 τεμ. (54 κιβ.)» των ml να μη
   σπρώχνει τίποτα) → ποσότητα + «Στο καλάθι» ΔΕΞΙΑ. Η εναλλαγή Τεμάχια/Παλέτες δεν μετακινεί τον μετρητή. */
.shop-pk-act .ord-qty-hint { margin: 0; flex: 0 0 8em; width: 8em; min-width: 8em; min-height: 1.25em; white-space: normal; line-height: 1.25; text-align: right; }
.shop-pk-act .shop-qty { flex: 0 0 auto; margin-left: 0; }
/* κρυφή υπόδειξη: ΚΡΑΤΑ τη θέση της (αλλιώς χοροπηδούν οι στήλες από γραμμή σε γραμμή) — αόρατη, όχι απούσα */
.shop-pk-act .ord-qty-hint[hidden] { display: block !important; visibility: hidden; }
/* 16/09 ι — ΣΤΕΝΗ ΣΤΗΛΗ (ταμπλέτα, ή υπολογιστής 1101-1300 όπου το καλάθι των 420px τρώει τη στήλη): ίδια στοίβαξη με το
   κινητό, κρινόμενη από το ΠΛΑΤΟΣ ΤΗΣ ΣΤΗΛΗΣ. Χωρίς αυτό οι γραμμές συσκευασίας έβγαιναν 237-265px και ανισοϋψείς. */
@container shop (max-width: 560px) {
  .shop-detail { grid-template-columns: minmax(0, 1fr); }
  .shop-detail > * { min-width: 0; }
}
/* Η ΓΡΑΜΜΗ κρίνει τη στοίβαξη, όχι η στήλη: ακόμα και σε οθόνη 1024 η γραμμή είναι ~409px (η φωτογραφία παίρνει 220). */
@container pkrow (max-width: 620px) {
  .shop-pk { grid-auto-rows: auto; }
  .shop-pk-act { width: 100%; justify-content: space-between; }
  .shop-pk-act .ord-qty-hint { flex: 1 1 100%; width: auto; min-width: 0; text-align: left; }
  .shop-pk-act .ord-qty-hint[hidden] { display: none !important; }
  .shop-pk-act .shop-unit { flex: 0 0 auto; width: auto; }
  .shop-pk-act .shop-unit-gap { display: none; }
  .shop-pk-act .cc-btn { flex: 1; min-width: 0; }
}
/* Οι λωρίδες brand / τομέα / κατηγοριών κυλούν πλάγια μόλις στενέψει η στήλη (το .shop-brands είναι width: max-content) */
@container shop (max-width: 760px) {
  .shop-brands, .shop-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .shop-brands::-webkit-scrollbar, .shop-cats::-webkit-scrollbar { display: none; }
  .shop-cat, .shop-brand { flex: none; white-space: nowrap; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 16/09 θ: σταγόνα νερού (μπλε) / διαλύτου (κόκκινη) δίπλα στο όνομα της παραλλαγής — με τη λέξη, ποτέ σκέτο χρώμα */
.shop-base { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }
.shop-base svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.shop-base i { font-family: var(--cc-data); font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: none; }
.shop-base.water { color: var(--drop-water); }
.shop-base.solvent { color: var(--drop-solvent); }
/* 16/09 η: ΜΙΑ λωρίδα MOQ ανά παραλλαγή — ο λογαριασμός δεν διχάζεται σε δύο γραμμές συσκευασίας */
.shop-moq { margin: 6px 0; padding: 7px 10px; border: 1px solid var(--v-line); border-left: 3px solid var(--cc-warn);
  background: var(--v-surface-2); font-size: 12px; line-height: 1.4; }
.shop-moq.ok { border-left-color: var(--cc-good); }
.shop-moq b { font-family: var(--cc-data); }
.shop-moq .shop-moq-sum { display: block; margin-top: 2px; color: var(--cc-ink-2); }
.shop-moq .shop-moq-need { color: var(--cc-bad); }
.shop-moq .shop-moq-ok { color: var(--cc-good); }
.shop-unit button { min-width: 84px; }   /* ίδιο πλάτος Τεμάχια/Παλέτες — καμία μετατόπιση στην εναλλαγή */
/* Διακόπτης μονάδας παραγγελίας «Τεμάχια / Παλέτες» (13/09): segmented, ίδια γεωμετρία με τον μετρητή. */
.shop-unit { display: inline-flex; border: 1px solid var(--v-line); }
.shop-unit button { background: var(--v-surface-2); border: 0; min-height: 0; height: 32px; padding: 0 10px; cursor: pointer; font-size: 12px; font-family: var(--cc-data); letter-spacing: .04em; text-transform: uppercase; color: var(--v-text-muted); border-radius: 0; transition: background var(--t-fast), color var(--t-fast); }
.shop-unit button + button { border-left: 1px solid var(--v-line); }
.shop-unit button.on { background: var(--v-text); color: var(--v-canvas); }
.shop-unit button:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }
.shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--v-line); }
.shop-qty button { background: var(--v-surface-2); border: 0; width: 32px; min-height: 0; height: 32px; padding: 0; cursor: pointer; font-size: 16px; color: var(--v-text); border-radius: 0; }
.shop-qty button:hover { background: var(--v-line); }
.shop-qty input { width: 4.5em; border: 0; text-align: center; margin: 0; padding: 6px 4px; background: var(--v-canvas); color: var(--v-text); font-family: var(--cc-data); font-size: 14px; min-height: 0; height: 32px; }
.shop-cart table.cc-data { font-size: 12.5px; }
.shop-cart table.cc-data td { padding: 7px 8px; white-space: normal; }

.ord-disc-wrap { display: inline-flex; align-items: center; gap: 2px; }
.ord-disc { width: 4.2em; padding: 6px 6px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text);
  font-family: var(--cc-data); font-size: 13px; text-align: right; min-height: 0; }
.ord-disc.bad { border-color: var(--cc-bad); color: var(--cc-bad); }
.ord-disc-pct { font-family: var(--cc-data); font-size: 12px; color: var(--cc-ink-2); }
.shop-brands { display: flex; gap: 0; margin: 4px 0 12px; border: 1px solid var(--v-text); width: max-content; max-width: 100%; }
/* Ένα brand (VERNILAC) = χωρίς λωρίδα brand. Η παγίδα του [hidden]: η λωρίδα έχει δικό της display. */
.shop-brands[hidden] { display: none !important; }
.shop-vgroups { margin: 6px 0 4px; }   /* 16/09 δ: τα κουμπιά ΑB / AD μέσα στην καρτέλα προϊόντος — ίδιο σχήμα με τις καρτέλες brand */
.shop-vgroups .shop-brand { padding: 7px 18px; font-size: .9rem; }
.shop-cats[hidden] { display: none !important; }      /* 16/09 β: με μία κατηγορία τα chips κρύβονται — το .shop-cats έχει display:flex (η παγίδα του [hidden]) */
.shop-sections .shop-brand b { font-weight: var(--w-med); opacity: .7; margin-left: .4em; font-size: .85em; }
@media (max-width: 620px) { .shop-sections .shop-brand b { display: none; } } /* σε κινητό τα δύο κουμπιά χωράνε μόνο χωρίς πλήθος */
.shop-brand { appearance: none; border: 0; border-right: 1px solid var(--v-line); background: transparent; cursor: pointer; padding: 9px 22px; min-height: 0; border-radius: 0;
  font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--v-text-muted);
  transition: background var(--t-fast) var(--ease-snap), color var(--t-fast) var(--ease-snap); }
.shop-brand:last-child { border-right: 0; }
.shop-brand:hover { background: var(--v-surface-2); color: var(--v-text); }
.shop-brand.on { background: var(--v-sky); color: var(--v-paper); }
.shop-line-brand { font-family: var(--cc-data); font-size: 10px; letter-spacing: .08em; color: var(--v-sky); }

/* Το dashboard της βιτρίνας ATLACOLL πιάνει ΟΛΟ το πλάτος της οθόνης (εντολή Στέφανου 10/09: «μεγάλωσε τη σελίδα
   προς τα δεξιά μέχρι το τέλος της οθόνης») — το όριο 1500px του body.chatui main μένει για τη VERNILAC.
   Στο ΤΕΛΟΣ του αρχείου: ίδιος επιλογέας-στόχος, μεγαλύτερη ειδικότητα και μεταγενέστερη σειρά. */
@media (min-width: 621px) {
  body.dash.chatui main { max-width: none; }
}

/* ═══════════════ ΚΙΝΗΤΟ — η βιτρίνα ATLACOLL (dashboard) σε ≤620px (10/09/2026, εντολή Στέφανου «πάμε και mobile») ═══════════════
   Ό,τι ακολουθεί πιάνει ΜΟΝΟ με body.dash — η VERNILAC και η συνομιλία δεν αλλάζουν. */
@media (max-width: 620px) {
  /* Το «＋ Νέα» της κεφαλίδας αφορά ΜΟΝΟ τη συνομιλία: στις άλλες σελίδες του dashboard κρύβεται */
  body.dash:not(:has(#view-chat.active)) #btn-new-top { display: none !important; }
  /* Πίνακες: σε κινητό μένουν οι βασικές στήλες (Κωδ. · Επωνυμία · Υπόλοιπο · 6Μ+ / Αρ. · Πελάτης · Αξία · Κατάσταση) */
  body.dash table.cc-data .c-2 { display: none; }
  body.dash table.cc-data td, body.dash table.cc-data th { padding-left: 8px; padding-right: 8px; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; }
  body.dash table.cc-data td.num, body.dash table.cc-data td.mono, body.dash table.cc-data th.num, body.dash table.cc-data th.mono { white-space: nowrap; }   /* μόνο η επωνυμία τυλίγεται — όχι κωδικοί/ποσά */
  body.dash table.cc-data .cc-badge { font-size: 9.5px; padding: 1px 5px; }
  body.dash table.cc-data td:not(.num):not(.mono):not(.c-2) { min-width: 9em; }   /* 16/09: η επωνυμία έσπαγε γράμμα-γράμμα (27px στήλη) — τώρα ο πίνακας κυλάει πλάγια μέσα στο .cc-scroll */
  /* 16/09 (Στέφανος, σημεία 12/13/15 — «να βλέπουν όλη την εικόνα που βλέπουν και από τον υπολογιστή»): στους Πελάτες και στις Μηχανές
     ΟΛΕΣ οι στήλες φαίνονται και στο κινητό, χωρίς σπάσιμο λέξεων — ο πίνακας κυλάει πλάγια μέσα στο .cc-scroll και οι δύο πρώτες
     στήλες (Κωδ. · Επωνυμία) μένουν ΚΑΡΦΩΜΕΝΕΣ αριστερά, ώστε να ξέρεις ποιον πελάτη κοιτάς όσο κυλάς προς τα ποσά. */
  body.dash #view-clients table.cc-data .c-2, body.dash #view-machines table.cc-data .c-2 { display: table-cell; }
  body.dash #view-clients table.cc-data td, body.dash #view-clients table.cc-data th,
  body.dash #view-machines table.cc-data td, body.dash #view-machines table.cc-data th { white-space: nowrap; overflow-wrap: normal; min-width: 0; }
  body.dash #view-clients table.cc-data td:nth-child(2) { white-space: normal; min-width: 9em; max-width: 10em; }
  /* 17/09 θ: οι 4 στήλες τζίρου έχουν τίτλο δύο γραμμών — χωρίς ελάχιστο πλάτος η δεύτερη γραμμή («ΤΡΕΧΟΝ ΕΤΟΣ») ξεχείλιζε
     αριστερά, κάτω από τη σταθερή στήλη της επωνυμίας, και έχανε το πρώτο γράμμα. */
  body.dash #cli-list table.cc-data th[data-k^="turnover_"] { min-width: 118px; }   /* px: το em εδώ είναι 10px */
  body.dash #cli-list table.cc-data th:nth-child(-n+2), body.dash #cli-list table.cc-data td:nth-child(-n+2) { position: sticky; z-index: 3; background: var(--v-surface-1); }
  body.dash #cli-list table.cc-data th:nth-child(1), body.dash #cli-list table.cc-data td:nth-child(1) { left: 0; width: 3.4em; min-width: 3.4em; max-width: 3.4em; }
  body.dash #cli-list table.cc-data th:nth-child(2), body.dash #cli-list table.cc-data td:nth-child(2) { left: calc(3.4em + 16px); box-shadow: 1px 0 0 var(--v-line); }
  body.dash #cli-list table.cc-data th:nth-child(-n+2) { background: var(--cc-th); z-index: 4; }
  :root[data-theme="dark"] body.dash #cli-list table.cc-data th:nth-child(-n+2) { background: var(--v-surface-2); }
  body.dash #cli-list table.cc-data tbody tr:nth-child(even) td:nth-child(-n+2) { background: var(--v-surface-2); }
  body.dash #cli-list table.cc-data tr.clickable:hover td:nth-child(-n+2) { background: color-mix(in srgb, var(--v-sky) 12%, var(--v-canvas)); }
  /* Ο πίνακας εξοπλισμού της καρτέλας πελάτη (σημείο 13, «παραμορφωμένος σε οριζόντια προβολή»): Περιγραφή και Χρήση τυλίγονται σε λογικό πλάτος, οι άλλες όχι */
  body.dash #view-clients table.cc-data.mc-items td:nth-child(3), body.dash #view-clients table.cc-data.mc-items td:nth-child(4),
  body.dash #view-machines table.cc-data.mc-items td:nth-child(3), body.dash #view-machines table.cc-data.mc-items td:nth-child(4) { white-space: normal; overflow-wrap: normal; min-width: 14em; max-width: 18em; }   /* ίδιο id-βάρος με τον κανόνα nowrap πιο πάνω, αλλιώς χάνει */
  body.dash table.cc-data .cc-badge, body.dash table.cc-data .ord-qty-hint { white-space: nowrap; }
  body.dash table.cc-data.ex-lines th, body.dash table.cc-data.ex-lines td { white-space: nowrap; min-width: 0; }   /* 16/09: ο πίνακας ημερών του εξοδολογίου έβγαινε γράμμα-γράμμα — κυλάει πλάγια μέσα στο .cc-scroll */
  .mr-track { overflow-x: auto; grid-auto-columns: minmax(96px, 1fr); padding-bottom: 4px; }   /* 16/09: η διαδρομή προόδου κοβόταν δεξιά — κυλάει πλάγια */
  .mg-edit { position: sticky; left: 0; width: calc(100vw - 56px); box-sizing: border-box; }   /* 16/09: ο επεξεργαστής λογαριασμού άπλωνε σε 1029px μέσα στον πίνακα — μένει στο πλάτος της οθόνης και ακολουθεί την πλάγια κύλιση */
  body.dash .cc-kpis, body.dash .cc-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dash .cc-kpi.hero { grid-column: 1 / -1; }
  /* ── eshop ── */
  body.dash .shop-layout { gap: 0; }
  body.dash .shop-main.cc-card { padding: 10px 12px; }
  body.dash .shop-brands, body.dash .shop-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 2px 12px 8px; }
  body.dash .shop-brands::-webkit-scrollbar, body.dash .shop-cats::-webkit-scrollbar { display: none; }
  body.dash .shop-cat, body.dash .shop-brand { flex: none; white-space: nowrap; }
  body.dash .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.dash .shop-img { height: 118px; }
  body.dash .shop-body { padding: 8px 9px 10px; }
  body.dash .shop-name { font-size: 13px; }
  body.dash .shop-tag { font-size: 11.5px; }
  body.dash .shop-detail { padding: 12px; }
  body.dash .shop-detail > * { min-width: 0; }
  body.dash .shop-detail .shop-img { height: 170px; }
  body.dash .shop-pk-act { width: 100%; justify-content: space-between; }
  body.dash .shop-pk-act .ord-qty-hint { flex: 1 1 100%; width: auto; min-width: 0; text-align: left; }   /* κινητό: η υπόδειξη σε δική της αράδα, κουμπιά από κάτω */
  body.dash .shop-pk-act .ord-qty-hint[hidden] { display: none !important; }   /* σε κινητό η κενή αράδα κοστίζει ύψος */
  body.dash .shop-pk-act .shop-unit { flex: 0 0 auto; width: auto; }
  body.dash .shop-pk-act .shop-unit-gap { display: none; }
  body.dash .shop-pk { grid-auto-rows: auto; }
  body.dash .shop-pk-act .cc-btn { flex: 1; min-width: 0; }
  /* Το καλάθι = ΦΥΛΛΟ πλήρους οθόνης πάνω από τα προϊόντα, ανοίγει από τη μπάρα κάτω */
  body.dash .shop-cart { position: fixed; inset: 0; z-index: 70; max-height: none; height: 100%;
    background: var(--v-surface-2); padding: 10px 12px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(102%); transition: transform var(--t-slow) var(--ease-snap); overflow-y: auto; overscroll-behavior: contain; }
  body.cart-open .shop-cart { transform: none !important; }
  body.dash .ord-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
    position: sticky; top: -10px; padding: 10px 0; background: var(--v-surface-2); z-index: 1; }
  body.dash .ord-sheet-head b { font-family: var(--display); text-transform: uppercase; font-size: 16px; letter-spacing: .02em; }
  body.dash .ord-line-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  /* Η μπάρα κάτω: ορατή μόνο στη σελίδα επεξεργασίας (το JS τη δείχνει), πάνω από τη ζώνη ασφαλείας του iPhone */
  body.dash .ord-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--v-text); }
  body.dash .ord-bar[hidden], body.cart-open .ord-bar, body.dash:not(:has(#view-orders.active)) .ord-bar { display: none !important; }
  body.dash:not(:has(#view-orders.active)) .shop-cart { display: none; }   /* το φύλλο ζει στο body — μόνο στις Παραγγελίες */
  body.dash .ord-bar button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px;
    background: var(--v-sky); color: var(--v-paper); border: 0; border-radius: 0; font-family: var(--display); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; font-size: 14px; cursor: pointer; }
  body.dash .ord-bar:not(.has) button { background: var(--v-surface-1); color: var(--v-text); }
  body.dash .ord-bar b { margin-left: auto; font-size: 16px; }
  body.dash .ord-bar-arrow { font-size: 12px; opacity: .85; }
  /* χώρος στο τέλος της λίστας προϊόντων ώστε η μπάρα να μην κρύβει την τελευταία κάρτα */
  body.dash #ord-edit-page .shop-main { padding-bottom: 84px; }
}

/* Μηχανές (11/09): η λίστα παγίων κάτω από τη γραμμή του πελάτη */
.cc table.cc-data tr.mc-detail > td { background: var(--v-surface-2); padding: 10px 12px 14px; }
.cc table.cc-data tr.mc-detail table.mc-items { margin-bottom: 8px; }
.cc table.cc-data tr.clickable.on > td { border-bottom-color: var(--v-sky); }

/* ══ Αιτήματα μηχανών (11/09/2026) — «πανέμορφο και φουλ εύχρηστο, όχι σαν φόρμα» (εντολή Στέφανου).
   Μόνο tokens, ακτίνα 0, μεταβάσεις ≤200ms, μία κύρια ενέργεια ανά περιοχή. ══ */
/* τα τρία κουμπιά-κάρτες */
.mr-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; }
.mr-new[hidden] { display: none !important; }
.mr-new .mr-act { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; background: var(--v-surface-1); border: 1px solid var(--v-line); border-top: 3px solid var(--v-text); cursor: pointer; color: var(--v-text); transition: border-color var(--t-fast) var(--ease-snap, ease-out), transform var(--t-fast) var(--ease-snap, ease-out); }
.mr-new .mr-act:hover { border-color: var(--v-text); }
.mr-new .mr-act:active { transform: scale(.985); }
.mr-new .mr-act svg { width: 30px; height: 30px; flex: none; color: var(--v-sky); }
.mr-new .mr-act b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.mr-new .mr-act small { display: block; color: var(--v-text-muted); font-size: 12px; margin-top: 2px; line-height: 1.3; }
.mr-new .mr-act.k-χρησιδάνειο { border-top-color: var(--v-sky); }
.mr-new .mr-act.k-επιστροφή { border-top-color: var(--cc-warn); }
.mr-new .mr-act.k-βλάβη { border-top-color: var(--cc-bad); }
/* η μπάρα φίλτρων της λίστας */
.mr-filter { flex-wrap: wrap; }
.mr-kpi { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mr-kpi:hover { border-color: var(--v-text); }
/* ο οδηγός */
.mr-panel { background: var(--v-surface-1); border: 1px solid var(--v-line); border-top: 3px solid var(--v-text); margin: 0 0 16px; }
.mr-panel[hidden] { display: none !important; }
.mr-panel-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--v-line); }
.mr-panel-head > div { flex: 1; min-width: 0; }
.mr-panel-head h3 { margin: 0; font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .05em; }
.mr-panel-head h3::before { display: none; }
.mr-panel-head p { margin: 4px 0 0; color: var(--v-text-muted); font-size: 13px; }
/* 16/09/2026 (έλεγχος κινητού): σε 375px το «× Κλείσιμο» στρίμωχνε τίτλο και επεξήγηση σε στήλη 110px — το κουμπί πέφτει σε δική του γραμμή, δεξιά */
@media (max-width: 620px) {
  .mr-panel-head { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px; }
  .mr-panel-head > div { flex: 1 1 200px; }
  .mr-panel-head > .cc-btn, .mr-panel-head > button { margin-left: auto; }
}
.mr-panel-ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--v-text); color: var(--v-canvas); }
.mr-panel-ic svg { width: 22px; height: 22px; }
.mr-step { padding: 16px 18px; border-bottom: 1px solid var(--v-line); }
.mr-step-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.mr-step-n { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--v-text); color: var(--v-canvas); font-family: var(--display); font-weight: 700; font-size: 13px; }
.mr-step-h h4 { margin: 0; font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.mr-step-h p { margin: 2px 0 0; color: var(--v-text-muted); font-size: 12.5px; }
.mr-cust-wrap { max-width: 640px; }
.mr-cust-wrap .ac-wrap[hidden] { display: none !important; }
.mr-cust-wrap input { width: 100%; font-size: 15px; padding: 10px 12px; }
.mr-cust-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--v-line); background: var(--v-canvas); }
.mr-cust-pill[hidden] { display: none !important; }
.mr-cust-pill svg { width: 18px; height: 18px; color: var(--v-sky); }
.mr-cust-pill b { font-size: 14px; }
.mr-cust-pill code, .mr-eq-card code, .mr-eq-tag code, .mr-req-top code { font-family: var(--cc-data); font-size: 11px; color: var(--v-text-muted); }
.mr-link { background: none; border: 0; padding: 0; color: var(--v-sky); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.mr-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 22px; }
.mr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mr-field-multi { grid-column: 1 / -1; }
.mr-field[hidden] { display: none !important; }        /* η παγίδα του [hidden]: το .mr-field έχει display: flex */
.mr-field .mr-lab small { font-weight: var(--w-med); color: var(--v-text-faint); text-transform: none; letter-spacing: 0; }
.mr-ret-hint { font-size: .86rem; line-height: 1.45; padding: 8px 10px; border-left: 3px solid var(--v-line); background: var(--v-surface-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mr-ret-hint:empty { display: none; }
.mr-ret-hint.ok { border-left-color: var(--cc-good); }
.mr-ret-hint.err { border-left-color: var(--cc-bad); }
.mr-ret-hint svg { width: 14px; height: 14px; }
.mr-eq-info { color: var(--v-text); font-size: 11.5px !important; }

/* ── Ο ΟΔΗΓΟΣ των αιτημάτων μηχανών (15/09: «να μη μοιάζει με φόρμα») — ράγα βημάτων αριστερά, μία ερώτηση δεξιά ── */
.mrw .mrw-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 420px; }
.mrw-rail { background: var(--v-canvas); border-right: 1px solid var(--v-line); padding: 18px 0; }
.mrw-rail ol { list-style: none; margin: 0; padding: 0; }
.mrw-rail li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 18px; border-left: 3px solid transparent; color: var(--v-text-faint); }
.mrw-rail li.reach { cursor: pointer; }
.mrw-rail li.reach:hover { background: var(--v-surface-2); }
.mrw-rail li.done { color: var(--v-text-muted); }
.mrw-rail li.cur { border-left-color: var(--v-sky); background: var(--v-surface-1); color: var(--v-text); }
.mrw-n { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--v-line); font-family: var(--display); font-weight: 700; font-size: 12px; background: var(--v-surface-1); }
.mrw-rail li.cur .mrw-n { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); }
.mrw-rail li.done .mrw-n { background: var(--cc-good); color: var(--v-paper); border-color: var(--cc-good); }
.mrw-n svg { width: 13px; height: 13px; }
.mrw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mrw-t small { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.mrw-t b { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; font-weight: var(--w-semi); }
.mrw-rail li:not(.cur) .mrw-t b:empty { display: none; }
.mrw-stage { padding: 28px 32px 24px; }
.mrw-screen { display: none; }
.mrw-screen.on { display: block; animation: mrwIn var(--t-base) var(--ease-snap, ease-out) both; }
@keyframes mrwIn { from { opacity: 0; } to { opacity: 1; } }
.mrw-q { margin: 0 0 6px; font-family: var(--display); font-size: 24px; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.mrw-q small { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .12em; color: var(--v-text-faint); vertical-align: middle; margin-left: 8px; }
.mrw-sub { margin: 0 0 18px; color: var(--v-text-muted); font-size: 14px; }
.mrw-sub:empty { margin-bottom: 12px; }
.mrw-multi-note { margin-top: 12px; font-size: 12.5px; }
.mrw .mr-field { gap: 0; }
.mrw .mr-lab { display: none; }
.mrw .mr-seg.mrw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-width: 760px; }
.mrw .mr-chip.mrw-tile { display: flex; align-items: center; gap: 12px; padding: 16px 16px; min-height: 64px; text-align: left; font-size: 15.5px; font-weight: var(--w-med); border-width: 2px; line-height: 1.25; }
.mrw .mr-chip.mrw-tile .mrw-tick { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--v-line); color: transparent; }
.mrw .mr-chip.mrw-tile .mrw-tick svg { width: 13px; height: 13px; }
.mrw .mr-chip.mrw-tile.on .mrw-tick { background: var(--v-canvas); border-color: var(--v-canvas); color: var(--v-text); }
.mrw .mrw-text { width: 100%; max-width: 640px; font-size: 16px; padding: 12px 14px; }
.mrw textarea.mrw-text { max-width: 760px; }
.mrw .mr-cust-wrap { max-width: 640px; }
.mrw .mr-cust-pill { padding: 12px 14px; }
.mrw .mr-cust-pill b { font-size: 16px; }
.mrw .mr-eq-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; max-width: 900px; }
.mrw .mr-eq-card { padding: 14px 14px; }
.mrw .mr-eq-body b { font-size: 14.5px; }
.mrw .mr-ret-hint { margin-top: 16px; max-width: 760px; font-size: 14px; }
.mrw-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 18px; max-width: 640px; border: 2px dashed var(--v-line); background: var(--v-canvas); cursor: pointer; text-align: center; transition: border-color var(--t-fast) var(--ease-snap, ease-out); }
.mrw-drop:hover { border-color: var(--v-text); }
.mrw-drop svg { width: 26px; height: 26px; margin-bottom: 4px; }
.mrw-drop b { font-size: 15px; }
.mrw-drop small { color: var(--v-text-muted); }
.mrw .mr-files { margin-top: 12px; }
.mrw-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; margin: 0; background: var(--v-line); border: 1px solid var(--v-line); max-width: 900px; }
.mrw-review > div { background: var(--v-surface-1); padding: 12px 14px; }
.mrw-review dt { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-muted); }
.mrw-review dd { margin: 4px 0 0; font-weight: var(--w-semi); font-size: 14.5px; overflow-wrap: anywhere; }
.mrw-nav { justify-content: space-between; }
.mrw-nav #mrw-back[disabled] { visibility: hidden; }
.mrw-nav .cc-btn[hidden] { display: none !important; }
@media (max-width: 900px) {
  .mrw .mrw-body { display: block; }
  .mrw-rail { border-right: 0; border-bottom: 1px solid var(--v-line); padding: 8px 0; }
  .mrw-rail ol { display: flex; overflow-x: auto; gap: 0; scrollbar-width: none; }
  .mrw-rail li { flex: none; border-left: 0; border-bottom: 3px solid transparent; padding: 8px 12px; max-width: 200px; }
  .mrw-rail li.cur { border-bottom-color: var(--v-sky); }
  .mrw-rail li:not(.cur) .mrw-t b { display: none; }
  .mrw-stage { padding: 18px 14px; }
  .mrw-q { font-size: 20px; }
  .mrw .mr-seg.mrw-tiles { grid-template-columns: 1fr 1fr; }
  .mr-bar.mrw-nav { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; }   /* σε κινητό: Πίσω · βήμα · Συνέχεια σε ΜΙΑ γραμμή */
  .mrw-nav .mr-bar-sum { flex: 1; min-width: 0; justify-content: center; font-size: 12px; text-align: center; white-space: nowrap; }   /* «Βήμα 1 από 10» σε μία γραμμή */
  .mrw-nav .mr-bar-act { flex-wrap: wrap; justify-content: flex-end; }
}
.mr-lab { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-muted); }
.mr-lab i { font-style: normal; color: var(--cc-bad); }
.mr-field input { width: 100%; }
.mr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-chip { padding: 8px 14px; background: var(--v-canvas); border: 1px solid var(--v-line); color: var(--v-text); cursor: pointer; font: inherit; font-size: 13.5px; transition: background var(--t-fast) var(--ease-snap, ease-out), border-color var(--t-fast) var(--ease-snap, ease-out), color var(--t-fast) var(--ease-snap, ease-out); }
.mr-chip:hover { border-color: var(--v-text); }
.mr-chip.on { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); }
.mr-chip:active { transform: scale(.97); }
.mr-hint-empty { margin: 0; color: var(--v-text-muted); font-size: 13px; }
.mr-eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.mr-eq-card { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--v-canvas); border: 1px solid var(--v-line); cursor: pointer; transition: border-color var(--t-fast) var(--ease-snap, ease-out); }
.mr-eq-card:hover { border-color: var(--v-text); }
.mr-eq-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mr-eq-check { flex: none; width: 22px; height: 22px; border: 1px solid var(--v-line); background: var(--v-surface-1); display: flex; align-items: center; justify-content: center; color: transparent; margin-top: 2px; }
.mr-eq-check svg { width: 14px; height: 14px; }
.mr-eq-card:has(input:checked) { border-color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-text); }
.mr-eq-card:has(input:checked) .mr-eq-check { background: var(--v-text); border-color: var(--v-text); color: var(--v-canvas); }
.mr-eq-card:has(input:focus-visible) { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.mr-eq-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-eq-body b { font-size: 13.5px; line-height: 1.3; }
.mr-eq-body small { color: var(--v-text-muted); font-size: 11.5px; }
#mr-eq-all { margin-top: 8px; }
#mr-desc { width: 100%; font-size: 14px; }
.mr-counter { margin-top: 4px; font-family: var(--cc-data); font-size: 11px; color: var(--cc-bad); }
.mr-counter.ok { color: var(--cc-good); }
.mr-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; background: var(--v-surface-1); border-top: 1px solid var(--v-line); }
.mr-bar-sum { font-size: 13.5px; color: var(--v-text-muted); display: flex; align-items: center; gap: 6px; }
.mr-bar-sum svg { width: 16px; height: 16px; color: var(--cc-good); }
.mr-bar-act { display: flex; align-items: center; gap: 12px; }
.mr-err { color: var(--cc-bad); font-size: 12.5px; }
.cc-btn.mr-primary { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); display: inline-flex; align-items: center; gap: 6px; }
.cc-btn.mr-primary svg { width: 15px; height: 15px; }
.cc-btn.mr-primary:hover { background: var(--v-sky); border-color: var(--v-sky); color: var(--v-ink); }
.cc-btn.mr-primary:disabled { opacity: .45; cursor: not-allowed; }
/* η λίστα: κάρτες με ράχη κατάστασης */
.mr-reqs { display: flex; flex-direction: column; gap: 8px; }
.mr-req { background: var(--v-canvas); border: 1px solid var(--v-line); border-left: 4px solid var(--v-line); transition: border-color var(--t-fast) var(--ease-snap, ease-out); }
.mr-req.st-warn { border-left-color: var(--cc-warn); }
.mr-req.st-sky { border-left-color: var(--v-sky); }
.mr-req.st-good { border-left-color: var(--cc-good); }
.mr-req.st-bad { border-left-color: var(--cc-bad); }
.mr-req:hover, .mr-req.open { border-color: var(--v-text); }
.mr-req.st-warn:hover, .mr-req.st-warn.open { border-left-color: var(--cc-warn); }
.mr-req.st-sky:hover, .mr-req.st-sky.open { border-left-color: var(--v-sky); }
.mr-req.st-good:hover, .mr-req.st-good.open { border-left-color: var(--cc-good); }
.mr-req.st-bad:hover, .mr-req.st-bad.open { border-left-color: var(--cc-bad); }
.mr-req-main { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: 0; text-align: left; color: var(--v-text); cursor: pointer; font: inherit; }
.mr-req-ic { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--v-surface-2); color: var(--v-text); }
.mr-req-ic svg { width: 20px; height: 20px; }
.mr-req-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mr-req-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mr-req-top b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-req-sub { color: var(--v-text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-req-when { font-family: var(--cc-data); font-size: 12px; color: var(--v-text-muted); }
.mr-chev { width: 20px; height: 20px; color: var(--v-text-faint); transition: transform var(--t-base) var(--ease-snap, ease-out); }
.mr-chev svg { width: 20px; height: 20px; }
.mr-req.open .mr-chev { transform: rotate(90deg); }
.mr-req-detail { border-top: 1px solid var(--v-line); padding: 16px 16px 18px; background: var(--v-surface-1); }
.mr-empty { padding: 28px 12px; text-align: center; color: var(--v-text-muted); }
.mr-empty p { margin: 4px 0; }
/* η διαδρομή προόδου */
.mr-track { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.mr-track li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; font-size: 12.5px; color: var(--v-text-muted); }
.mr-track li::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: var(--v-line); z-index: 0; }
.mr-track li:first-child::before { left: 50%; }
.mr-track li:last-child::before { right: 50%; }
.mr-track li i { position: relative; z-index: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--v-canvas); border: 2px solid var(--v-line); color: var(--v-canvas); }
.mr-track li i svg { width: 14px; height: 14px; }
.mr-track li.done i, .mr-track li.done::before { background: var(--v-text); border-color: var(--v-text); }
.mr-track li.done { color: var(--v-text); }
.mr-track li.cur i { border-color: var(--v-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-sky) 25%, transparent); }
.mr-track li.cur { color: var(--v-text); font-weight: var(--w-semi); }
.mr-track li.bad i { background: var(--cc-bad); border-color: var(--cc-bad); }
.mr-track li.bad { color: var(--cc-bad); font-weight: var(--w-semi); }
.mr-track li small { font-family: var(--cc-data); font-size: 10.5px; color: var(--v-text-faint); }
/* δύο στήλες */
.mr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.mr-col-main { min-width: 0; }
.mr-block { margin-top: 14px; }
.mr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; }
.mr-fact { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--v-line); min-width: 0; }
.mr-fact > span { font-family: var(--cc-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-text-muted); }
.mr-fact > b { font-size: 14px; font-weight: var(--w-semi); }
.mr-fact-eq { grid-column: 1 / -1; }
.mr-eq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mr-eq-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--v-canvas); border: 1px solid var(--v-line); font-size: 13px; font-weight: var(--w-med); }
.mr-desc { white-space: pre-wrap; margin: 4px 0 0; line-height: 1.5; }
.mr-side-box { background: var(--v-canvas); border: 1px solid var(--v-line); padding: 12px 14px 14px; margin-bottom: 12px; }
.mr-side-actions { display: flex; flex-direction: column; gap: 8px; }
.mr-side-actions .cc-btn { width: 100%; text-align: center; justify-content: center; }
.mr-wait { margin: 0; color: var(--v-text-muted); font-size: 13px; }
.mr-timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--v-line); display: flex; flex-direction: column; gap: 10px; }
.mr-timeline li { position: relative; font-size: 12.5px; color: var(--v-text-muted); }
.mr-timeline li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; background: var(--v-text); }
.mr-timeline li.good::before { background: var(--cc-good); }
.mr-timeline li.bad::before { background: var(--cc-bad); }
.mr-timeline li b { color: var(--v-text); }
.mr-quote { margin-top: 3px; color: var(--v-text); font-style: italic; }
/* συνεννόηση */
.mr-notes { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.mr-note { display: flex; gap: 10px; align-items: flex-start; }
.mr-avatar { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--v-surface-2); color: var(--v-text); font-family: var(--display); font-weight: 700; font-size: 12px; }
.mr-note.role-μηχανές .mr-avatar, .mr-note.role-διαχειριστής .mr-avatar { background: var(--v-text); color: var(--v-canvas); }
.mr-note-body { flex: 1; min-width: 0; background: var(--v-canvas); border: 1px solid var(--v-line); padding: 8px 12px; }
.mr-note-meta { font-size: 12px; margin-bottom: 3px; }
.mr-note-meta span { color: var(--v-text-muted); }
.mr-note-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; }
.mr-composer textarea { width: 100%; }
.mr-composer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.mr-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mr-attach svg { width: 14px; height: 14px; }
.mr-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mr-file { width: 132px; height: 96px; border: 1px solid var(--v-line); background: var(--v-canvas); padding: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color var(--t-fast) var(--ease-snap, ease-out); }
.mr-file:hover { border-color: var(--v-text); }
.mr-file img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-file.mr-video { flex-direction: column; gap: 4px; text-decoration: none; color: var(--v-text); font-family: var(--display); font-weight: 700; }
.mr-file.mr-video small { font-weight: 400; color: var(--v-text-muted); }
.cc table.cc-data tr.mc-returning > td { opacity: .75; }
@media (max-width: 900px) {
  .mr-cols { grid-template-columns: minmax(0, 1fr); }
  .mr-req-main { grid-template-columns: 36px minmax(0, 1fr) 20px; }
  .mr-req-when { display: none; }
  .mr-req-st { grid-column: 2; }
  .mr-track li span { font-size: 11px; }
  .mr-bar { flex-direction: column; align-items: stretch; }
  .mr-bar-act { justify-content: flex-end; }
}

/* ══ ΔΙΑΦΗΜΙΣΤΙΚΟ ΥΛΙΚΟ (13/09/2026) — πάνω στα .mr-* των μηχανών, μόνο ό,τι δεν υπάρχει εκεί ══ */
.mr-new .mr-act.k-marketing { border-top-color: var(--v-sky); }
.mr-new .mr-act.k-lib { border-top-color: var(--v-text); }
.mr-new .mr-act[hidden] { display: none !important; }
.mk-track li span { font-size: 11.5px; }
.mk-offers { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mk-offer { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--v-canvas); border: 1px solid var(--v-line); cursor: default; }
.mk-offer.chosen { border-color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-text); }
.mk-offer input[type=radio] { width: auto; margin: 0; }
.mk-offer-n { font-family: var(--cc-data); font-size: 11px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--v-surface-2); }
.mk-offer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-offer-body small { color: var(--v-text-muted); font-size: 11.5px; }
.mk-offer-amt { font-family: var(--cc-data); font-size: 16px; font-weight: var(--w-bold); white-space: nowrap; }
.mk-offer-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.mk-offer-add input { min-width: 0; }
.mk-art-bar { justify-content: flex-start; }
.mk-ci { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 4px 0 6px; }
.mk-ci > div { display: flex; flex-direction: column; }
.mk-ci span { font-family: var(--cc-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-text-muted); }
.mk-ci b { font-family: var(--cc-data); font-size: 14px; }
.mk-cost .v { font-size: 22px; }
.mk-photos { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mk-pending { position: relative; }
.mk-pending::after { content: '×'; position: absolute; top: 2px; right: 6px; font-size: 16px; line-height: 1; color: var(--v-paper); text-shadow: 0 0 3px var(--v-ink); }
.mk-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.mk-lib-item { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 4px; padding: 0 0 8px; background: var(--v-canvas); border: 1px solid var(--v-line); cursor: pointer; color: var(--v-text); font: inherit; transition: border-color var(--t-fast) var(--ease-snap, ease-out); }
.mk-lib-item:hover { border-color: var(--v-text); }
.mk-lib-thumb { display: flex; align-items: center; justify-content: center; height: 110px; overflow: hidden; background: var(--v-surface-2); }
.mk-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-lib-thumb svg { width: 36px; height: 36px; }
.mk-lib-item b { padding: 0 8px; font-size: 13px; }
.mk-lib-item small { padding: 0 8px; color: var(--v-text-muted); font-size: 11px; line-height: 1.35; }
.mk-thumbs { display: inline-flex; gap: 3px; }
.mk-thumbs img { width: 34px; height: 26px; object-fit: cover; border: 1px solid var(--v-line); cursor: zoom-in; }
@media (max-width: 900px) {
  .mk-offer-add { grid-template-columns: 1fr; } .mk-offer { flex-wrap: wrap; }
  /* 7 βήματα δεν χωράνε σε 375px: η διαδρομή κυλάει οριζόντια μόνη της, κάθε βήμα ≥88px */
  .mk-track { grid-auto-columns: minmax(88px, 1fr); overflow-x: auto; padding-bottom: 6px; }
}
/* 16/09/2026 (έλεγχος κινητού): η προσφορά τυπογραφείου (αριθμός · τυπογραφείο · ποσό · Άνοιγμα) δεν χωρά σε μία γραμμή στα 375px —
   πρώτη γραμμή ο αριθμός και το τυπογραφείο, δεύτερη το ποσό και το «Άνοιγμα» */
@media (max-width: 620px) {
  .mk-offer { row-gap: 6px; }
  .mk-offer-body { flex: 1 1 calc(100% - 60px); }
  .mk-offer-amt { margin-left: 32px; }
  .mk-offer > .cc-btn { margin-left: auto; }
}

/* ══ 14/09/2026 (σημείο 20): φρένο έγκρισης παραγγελίας σε πελάτη εκτός ορίων πίστωσης ══ */
.ord-modal-wrap { position: fixed; inset: 0; z-index: 60; background: var(--v-scrim-photo); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ord-modal { background: var(--v-surface-1); color: var(--v-text); border: 1px solid var(--v-line); border-top: 4px solid var(--cc-warn); max-width: 520px; width: 100%; padding: 18px 20px; }
.ord-modal h3 { margin: 0 0 6px; font-family: var(--font-display); text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.ord-modal h3::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--cc-warn); margin-right: 8px; vertical-align: middle; }
.ord-modal-cust { margin: 0 0 10px; font-weight: var(--w-semi); }
.ord-modal-flags { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--v-line); }
.ord-modal-flags li { padding: 8px 10px; border-left: 4px solid var(--cc-warn); display: grid; gap: 2px; }
.ord-modal-flags li + li { border-top: 1px solid var(--v-line); }
.ord-modal-flags li span { font-family: var(--cc-data); font-size: 12.5px; color: var(--cc-ink-2); }
.ord-modal-q { margin: 0 0 4px; font-size: 17px; font-weight: var(--w-bold); }
.ord-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
/* 17/09 γ: παράθυρο «Ποιο χρώμα θέλει ο πελάτης;» (χρωματιστό μπλουζάκι συνδιαφήμισης) — ράχη Sky, όχι Amber (δεν είναι προειδοποίηση) */
.ord-modal.ord-modal-color { border-top-color: var(--v-sky); }
.ord-modal.ord-modal-color h3::before { background: var(--v-sky); }
.ord-modal-in { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 9px 10px; margin: 8px 0 0; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); }
.ord-modal-in:focus { outline: 2px solid var(--v-focus); outline-offset: 1px; }
.ord-modal-in.bad { border-color: var(--cc-bad); }
.ord-credit { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--cc-warn-line); border-left: 4px solid var(--cc-warn); background: var(--cc-warn-bg); font-size: 13.5px; }
.ord-credit ul { margin: 6px 0 0; padding-left: 18px; }
.ord-credit[hidden] { display: none !important; }
.ord-flag { display: inline-block; font-family: var(--cc-data); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border: 1px solid var(--cc-warn); color: var(--v-text); margin: 1px 2px 1px 0; }
table.cc-data.ord-cr tr.open td { background: var(--cc-warn-bg); }
table.cc-data.ord-cr tr.ord-cr-detail > td { padding: 0 0 8px 18px; }
table.cc-data.inner { margin: 0; font-size: 12.5px; }
table.cc-data.inner th { font-size: 10px; }
/* Μενού: δεύτερη γραμμή με μικρότερα γράμματα (14/09, «Προβολή — Ταμπέλες - Επιγραφές - Banners») */
.nav-btn .nav-sub { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: .02em; opacity: .72; line-height: 1.2; margin-top: 1px; }
body.dash #side .nav-btn:not(#btn-theme) { flex-wrap: wrap; }
body.dash #side .nav-btn:not(#btn-theme) .nav-sub { flex-basis: 100%; }
.dash-title .dash-sub { display: block; font-family: var(--font); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--v-text-muted); margin-top: 2px; }

/* Μηχανές: δύο καρτέλες (Αιτήματα · Εξοπλισμός) + επιλογέας εταιρείας δεξιά (14/09/2026) */
.mc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.mc-switch-row .req-switch { margin: 0; }
.mc-switch-row select { font-family: var(--cc-data); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border: 1px solid var(--v-text); background: var(--v-surface-1); color: var(--v-text); border-radius: 0; }
#mc-pane-req[hidden], #mc-pane-eq[hidden], #mc-co[hidden] { display: none !important; }

/* Μητρώο εξοπλισμού: chips κατηγοριών, όψεις ανά πελάτη / ανά πάγιο, φίλτρο πωλητή (14/09/2026) */
.mc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mc-cat, .mc-view { font-family: var(--cc-data); font-size: 11.5px; letter-spacing: .02em; padding: 5px 10px; border: 1px solid var(--v-line); background: var(--v-surface-1); color: var(--v-text); cursor: pointer; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast); }
.mc-cat b { font-weight: var(--w-bold); }
.mc-cat small { font-size: 10px; color: var(--v-text-faint); }
.mc-cat:hover, .mc-view:hover { border-color: var(--v-text); }
.mc-cat.on, .mc-view.on { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); }
.mc-cat.on small { color: var(--v-canvas); opacity: .75; }
.mc-views { display: inline-flex; }
.mc-views .mc-view + .mc-view { margin-left: -1px; }
#mc-seller { font-family: var(--cc-data); font-size: 12px; padding: 6px 10px; border: 1px solid var(--v-line); background: var(--v-surface-1); color: var(--v-text); border-radius: 0; }
#mc-seller[hidden] { display: none !important; }
table.cc-data.mc-flat td:first-child { white-space: nowrap; }

/* ══ ΤΑ ΤΑΞΙΔΙΑ ΜΟΥ (14/09/2026, β΄ γραφή: ένας μήνας + χάρτης) — πάνω στη γλώσσα του Cockpit. Τύποι ημερών ΜΟΝΟ με
   tokens (επαρχία = Sky tint, έδρα = chip, άδεια = warn tint, αργία = ραβδώσεις)· «με προϊστάμενο» = Amber περίγραμμα,
   όπως το πορτοκαλί του Excel. Ο χάρτης είναι SVG (στεριά = chip, θάλασσα = canvas, πελάτες = κουκκίδες, επιλεγμένοι Sky).
   Ακτίνα 0, μεταβάσεις ≤200ms, 0 hex. ══ */
.tr-top { align-items: center; }
.tr-top #tr-seller { max-width: 340px; }
.tr-stats { font-size: 13px; color: var(--cc-ink-2); display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-stats b { font-family: var(--display); font-size: 15px; color: var(--v-text); font-weight: 700; margin-right: 2px; }
.tr-stats i { font-style: normal; color: var(--v-text-faint); }
.tr-lg { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--v-line); vertical-align: -2px; margin-right: 4px; background: var(--v-canvas); }
.tr-legend { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-family: var(--cc-data); font-size: 11px; color: var(--cc-ink-2); margin-top: 10px; }
.tr-lg.t-epar, .tr-d.t-epar, .tr-line.t-epar { background: color-mix(in srgb, var(--v-sky) 22%, var(--v-canvas)); }
.tr-lg.t-edra, .tr-d.t-edra, .tr-line.t-edra { background: var(--cc-chip); }
.tr-lg.t-adeia, .tr-d.t-adeia, .tr-line.t-adeia { background: var(--cc-warn-bg); }
.tr-lg.t-argia, .tr-d.t-argia, .tr-line.t-argia { background: repeating-linear-gradient(135deg, var(--v-canvas) 0 3px, var(--v-line) 3px 4px); }
.tr-lg.sup, .tr-d.sup, .tr-line.sup { box-shadow: inset 0 0 0 2px var(--v-amber); }
.cc-btn.ghost { background: transparent; color: var(--v-text); border: 1px solid var(--v-text); }
.cc-btn.ghost:hover { background: var(--v-text); color: var(--v-canvas); }
.tr-mini { padding: 5px 10px; font-size: 11.5px; }
/* Σήμερα */
.tr-nowcard .tr-line:last-child { margin-bottom: 0; }
.tr-line { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; margin-bottom: 4px; transition: border-color var(--t-fast); }
.tr-line:hover { border-color: var(--v-text); }
.tr-line.today { border-width: 2px; border-color: var(--v-text); }
.tr-line-d { font-family: var(--cc-data); font-size: 12px; min-width: 64px; }
.tr-line-t { font-family: var(--cc-data); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-ink-2); min-width: 100px; }
.tr-line-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.tr-line-x small { color: var(--cc-ink-2); }
/* Ημερολόγιο + χάρτης δίπλα-δίπλα */
.tr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.tr-calcard, .tr-mapcard { margin: 0; }
.tr-cal-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tr-cal-h h3 { margin: 0; flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tr-cal-h h3 small { font-family: var(--cc-data); font-size: 11px; font-weight: 400; color: var(--cc-ink-2); text-transform: none; letter-spacing: 0; }
.tr-nav { width: 34px; height: 34px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 0; transition: border-color var(--t-fast); }
.tr-nav:hover { border-color: var(--v-text); }
.tr-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; }
.tr-strip-m { border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--cc-ink-2); font-family: var(--cc-data); font-size: 10.5px; padding: 4px 0 3px; cursor: pointer; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: background var(--t-fast), color var(--t-fast); }
.tr-strip-m small { font-size: 9.5px; color: var(--v-text-faint); }
.tr-strip-m.on { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); }
.tr-strip-m.on small { color: var(--v-canvas); opacity: .75; }
.tr-strip-m:hover:not(.on) { border-color: var(--v-text); }
.tr-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tr-grid > i { font-style: normal; font-family: var(--cc-data); font-size: 10.5px; color: var(--v-text-faint); text-align: center; padding-bottom: 2px; }
.tr-d { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-height: 58px; padding: 5px 6px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.tr-d b { font-family: var(--cc-data); font-size: 12.5px; font-weight: 500; line-height: 1; }
.tr-d small { font-family: var(--cc-data); font-size: 10.5px; line-height: 1.2; color: var(--cc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr-d.t-sk { background: var(--v-surface-1); color: var(--v-text-faint); }
.tr-d.t-sk b { color: var(--v-text-faint); }
.tr-d.cont small::before { content: "↳ "; }
.tr-d.today { border-color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-text); }
.tr-d.today b { font-weight: 700; }
.tr-d.sup.today { box-shadow: inset 0 0 0 2px var(--v-amber), inset 0 0 0 3px var(--v-text); }
.tr-d:hover { border-color: var(--v-text); }
.tr-d.sel { outline: 3px solid var(--v-sky); outline-offset: -3px; }
.tr-d.hl { outline: 2px solid var(--v-text); outline-offset: -2px; }
.tr-d.hl small { color: var(--v-text); font-weight: 500; }
/* Η καρτέλα της ημέρας (μέσα στην κάρτα του ημερολογίου) */
.tr-day { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--v-line); border-left: 4px solid var(--v-sky); background: var(--v-surface-1); }
.tr-day-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-day-h b { font-family: var(--display); font-size: 14px; }
.tr-x { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 0; }
.tr-x:hover { border-color: var(--v-text); }
.tr-day-text { font-family: var(--cc-data); font-size: 13.5px; margin: 8px 0 6px; }
.tr-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 6px; font-size: 13px; }
.tr-facts span i { font-style: normal; font-family: var(--cc-data); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--cc-ink-2); display: block; }
.tr-regions { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.tr-regions li b { font-family: var(--cc-data); font-weight: 500; margin-right: 6px; }
.tr-regions li small { color: var(--cc-ink-2); display: block; }
.tr-day-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Χάρτης */
.tr-map-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-map-h h3 { margin-bottom: 8px; }
.tr-map-foot { font-family: var(--cc-data); font-size: 11.5px; color: var(--cc-ink-2); }
.tr-map-wrap { position: relative; border: 1px solid var(--v-line); background: var(--v-canvas); aspect-ratio: 1 / 1.03; overflow: hidden; touch-action: none; }
#tr-map { width: 100%; height: 100%; display: block; cursor: grab; }
#tr-map:active { cursor: grabbing; }
.tr-land { fill: var(--cc-chip); stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
circle.tr-pt { fill: var(--v-text-faint); fill-opacity: .55; stroke: none; cursor: pointer; }
circle.tr-pt.approx { fill-opacity: .12; stroke: var(--v-text-faint); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; }
circle.tr-pt.on { fill: var(--v-sky); fill-opacity: 1; stroke: var(--v-text); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: none; }
circle.tr-pt.on.approx { fill-opacity: .35; stroke-dasharray: 2 2; }
circle.tr-pt:hover { stroke: var(--v-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tr-home rect { fill: var(--v-text); stroke: var(--v-canvas); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tr-map-tools { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 2px; }
.tr-map-tools button { width: 32px; height: 32px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 0; transition: border-color var(--t-fast); }
.tr-map-tools button[data-z="fit"] { width: auto; padding: 0 8px; font-family: var(--cc-data); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.tr-map-tools button:hover { border-color: var(--v-text); }
.tr-tip { position: absolute; pointer-events: none; background: var(--v-text); color: var(--v-canvas); padding: 6px 9px; font-size: 12px; line-height: 1.35; max-width: 220px; z-index: 2; }
.tr-tip small { opacity: .75; }
.tr-map-hint { margin: 8px 0 0; font-size: 12px; }
/* Διαδρομές ως κάρτες */
.tr-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tr-route { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1px solid var(--v-line); border-left: 4px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; min-width: 0; transition: border-color var(--t-fast), background var(--t-fast); }
.tr-route b { font-family: var(--cc-data); font-weight: 500; font-size: 13px; }
.tr-route-d { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tr-route small { font-family: var(--cc-data); font-size: 10.5px; color: var(--cc-ink-2); }
.tr-route:hover { border-color: var(--v-text); }
.tr-route.on { border-left-color: var(--v-sky); background: color-mix(in srgb, var(--v-sky) 14%, var(--v-canvas)); border-color: var(--v-text); }
table.cc-data .tr-cust-row { cursor: pointer; }
table.cc-data .tr-cust-row td small { color: var(--cc-ink-2); }
table.cc-data td.tr-wrap { white-space: normal; min-width: 260px; }
#tr-regions details > summary { list-style: none; cursor: pointer; }
#tr-regions details > summary h3 { margin: 0; }
#tr-regions details[open] > summary h3 { margin-bottom: 12px; }
#tr-regions details > summary::-webkit-details-marker { display: none; }
@media (max-width: 1000px) { .tr-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .tr-line { flex-wrap: wrap; }
  .tr-line-x { white-space: normal; flex-basis: 100%; }
  .tr-d { min-height: 46px; padding: 3px 4px; }
  .tr-strip-m small { display: none; }
}
table.cc-data .tr-cust-row.no-card { cursor: default; }
table.cc-data .tr-cust-row.no-card td { color: var(--cc-ink-2); }
.tr-cb { font-size: 10px; padding: 1px 6px; vertical-align: 1px; }

/* Προϊστάμενος πωλητών (14/09/2026): η επιλογή μέσα στον επεξεργαστή λογαριασμού της Διαχείρισης */
.mg-sup { align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-sup select { min-width: 220px; padding: 4px 8px; font: inherit; font-size: .9rem; color: var(--v-text); background: var(--v-canvas); border: 1px solid var(--v-line); border-radius: 0; }

/* Προϊστάμενος (14/09): ο πίνακας «Η ομάδα μου — ανά πωλητή» στη θέση των KPI */
.cc-kpis:has(.cli-team) { display: block; }
.cli-team h3 .cc-muted { font-weight: var(--w-med); text-transform: none; letter-spacing: 0; }

/* ══ ΕΞΟΔΟΛΟΓΙΑ ΤΑΞΙΔΙΩΝ (14/09/2026) — μόνο tokens, ακτίνα 0 ══ */
.ex-top { flex-wrap: wrap; }
.ex-form h4, .ex-detail h4, #ex-analytics h4 { margin: 18px 0 8px; font: var(--w-bold) .85rem/1.2 "Roboto Condensed", var(--font); text-transform: uppercase; letter-spacing: .06em; }
.ex-form h4 small, #ex-analytics h3 .cc-muted { font-weight: var(--w-med); text-transform: none; letter-spacing: 0; }
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ex-grid label, .ex-credit label, .ex-reject label, .ex-form > label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--v-text-muted); }
.ex-grid label input, .ex-grid label select, .ex-credit label input, .ex-form textarea, .ex-reject textarea { font: inherit; font-size: .95rem; color: var(--v-text); background: var(--v-canvas); border: 1px solid var(--v-line); border-radius: 0; padding: 6px 8px; }
.ex-grid .ex-wide { grid-column: 1 / -1; }
.ex-check { flex-direction: row !important; align-items: center; gap: 8px !important; grid-column: 1 / -1; }
.ex-check input { width: auto; }
.ex-calc { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; font-size: .85rem; color: var(--v-text-muted); }
.ex-calc b, .ex-totals b { color: var(--v-text); font-family: var(--cc-data); }
.ex-total { margin-left: auto; font-weight: var(--w-bold); }
.ex-lines th, .ex-lines td { white-space: nowrap; }
.ex-lines td input { width: 74px; font: inherit; font-size: .85rem; color: var(--v-text); background: var(--v-canvas); border: 1px solid var(--v-line); border-radius: 0; padding: 4px 6px; text-align: right; }
.ex-lines td input[type="date"] { width: 132px; text-align: left; }
.ex-lines td input[data-k="receipts"] { width: 56px; }
.ex-lines tfoot th { font-family: var(--cc-data); }
.ex-lines .ex-rowtot { font-family: var(--cc-data); font-weight: var(--w-bold); }
.ex-x { width: 26px; height: 26px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text-muted); border-radius: 0; cursor: pointer; }
.ex-x:hover { color: var(--cc-bad); border-color: var(--cc-bad); }
.ex-lines-tools { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
/* 16/09 γ: πολλές καταχωρήσεις στο ίδιο κελί — το «+» στη γωνία, το κλειδωμένο κελί με το άθροισμα, ο επεξεργαστής κάτω από την ημέρα */
.ex-lines td.ex-cell { position: relative; }
.ex-lines td.ex-cell input { padding-right: 22px; }
.ex-lines td.ex-cell input.has-items { background: var(--v-surface-2); cursor: pointer; font-weight: var(--w-semi); }
.ex-more { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; line-height: 16px; font: var(--w-semi) 12px/16px var(--cc-data); border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text-muted); border-radius: 0; cursor: pointer; opacity: .55; transition: opacity var(--t-fast) var(--ease-snap); }
.ex-cell:hover .ex-more, .ex-cell:focus-within .ex-more, .ex-more.on { opacity: 1; }
.ex-more.on { background: var(--v-text); color: var(--v-canvas); border-color: var(--v-text); }
.ex-lines tr.ex-editing td { background: var(--v-surface-2); }
table.cc-data.ex-lines tr.ex-editor td, body.dash table.cc-data.ex-lines tr.ex-editor td { white-space: normal; min-width: 0; padding: 0; background: var(--v-surface-2); }
.ex-ed { position: sticky; left: 0; max-width: min(760px, calc(100vw - 56px)); margin: 6px; border: 1px solid var(--v-text); border-left: 4px solid var(--v-sky); background: var(--v-surface-1); padding: 10px 12px; display: grid; gap: 8px; text-align: left; }
.ex-ed-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: .85rem; }
.ex-ed-sum { margin-left: auto; font-family: var(--cc-data); }
.ex-ed-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ex-ed-n { font-family: var(--cc-data); color: var(--v-text-muted); width: 1.6em; }
.ex-lines .ex-ed-row input.ex-n { width: 92px; text-align: right; }
.ex-lines .ex-ed-row input.ex-ed-note { flex: 1 1 200px; min-width: 0; width: auto; text-align: left; }
.ex-ed-cust { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--v-text-muted); white-space: nowrap; }
.ex-ed-cust input { width: auto !important; }
.ex-ed-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ex-ed-tools .hint { margin: 0; }
.ex-items-badge { display: inline-block; margin-left: 4px; padding: 0 5px; font: var(--w-semi) 10px/16px var(--cc-data); background: var(--v-text); color: var(--v-canvas); vertical-align: 1px; }
.ex-analysis { font-size: .82rem; color: var(--v-text-muted); margin: 8px 0 0; display: grid; gap: 3px; }
.ex-alloc { margin: 10px 0 0; display: grid; gap: 4px; }   /* 16/09 δ: κόστος ανά ημέρα με τα επιμεριζόμενα */
.ex-alloc > b { color: var(--v-text); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.ex-alloc > .hint { margin: 0; }
.ex-alloc-t { width: auto; }
.ex-alloc-seg { font-size: .82rem; color: var(--v-text-muted); }
.ex-analysis > b { color: var(--v-text); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.ex-analysis b { color: var(--v-text); }
@media (max-width: 620px) {   /* κινητό: ποσό + × στην πρώτη γραμμή, σημείωση και «με πελάτη» από κάτω σε όλο το πλάτος */
  .ex-lines .ex-ed-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
  .ex-lines .ex-ed-row .ex-ed-note, .ex-lines .ex-ed-row .ex-ed-cust { grid-column: 2 / 4; }
  .ex-lines .ex-ed-row .ex-ed-cust { white-space: normal; }
  .ex-lines .ex-ed-row .ex-x { grid-column: 3; grid-row: 1; }   /* το × δίπλα στο ποσό, όχι σε δική του γραμμή */
}
.ex-lines-tools .hint { margin: 0; }
.ex-credit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ex-credit .ex-calc { grid-column: 1 / -1; }
.ex-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.ex-msg { font-size: .85rem; color: var(--v-text-muted); }
.ex-msg.err { color: var(--cc-bad); }
.ex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ex-head h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ex-sub { font-size: .85rem; color: var(--v-text-muted); margin-top: 2px; }
.ex-totals { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: .9rem; }
.ex-totals small { color: var(--v-text-muted); }
.ex-notes { margin: 10px 0 0; font-size: .9rem; }
.ex-reject { margin-top: 12px; display: grid; gap: 8px; max-width: 560px; }
.ex-akpis { margin-bottom: 10px; }
@media (max-width: 900px) {
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-credit { grid-template-columns: minmax(0, 1fr); }
}
/* η παγίδα του [hidden]: τα .ex-* έχουν δικό τους display (grid/flex) — ρητός κανόνας για όλη τη σελίδα */
#view-expenses [hidden] { display: none !important; }

/* Απόχρωση ΧΡ ελεύθερου κειμένου στη γραμμή του καλαθιού (15/09/2026 — κάθε ΧΡ θέλει απόχρωση) */
.ord-line .ord-shade-in { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: .85rem; padding: 4px 6px; border: 1px solid var(--v-line); background: var(--v-canvas); color: var(--v-text); border-radius: 0; }
.ord-line .ord-shade-in.bad { border-color: var(--cc-bad); }

/* ── Σταλμένη παραγγελία σε ΟΛΗ ΤΗΝ ΟΘΟΝΗ (15/09/2026, εντολή Στέφανου) ──
   body.ord-sent: το eshop (.shop-main) κρύβεται, η .shop-layout γίνεται μία στήλη και το «καλάθι» παύει να είναι
   κολλητή στενή στήλη με δική της κύλιση — γίνεται η σελίδα της παραγγελίας: αριστερά ο πελάτης, δεξιά τα είδη σε
   πλέγμα. Μπαίνει στο ΤΕΛΟΣ του αρχείου: πρέπει να νικήσει το sticky/flex του υπολογιστή (≥1101) και το φύλλο του
   κινητού (body.dash .shop-cart, position: fixed) — ίδια ή μεγαλύτερη ειδικότητα ΚΑΙ μεταγενέστερη σειρά. */
body.ord-sent .shop-layout { grid-template-columns: minmax(0, 1fr); }
body.ord-sent .shop-main { display: none !important; }
body.ord-sent .ord-bar, body.ord-sent .ord-sheet-head { display: none !important; }
body.ord-sent .shop-cart, body.dash.ord-sent .shop-cart {
  position: static; inset: auto; z-index: auto; height: auto; max-height: none; overflow: visible; transform: none; transition: none;
  background: transparent; padding: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
body.ord-sent .shop-cart > .cc-card { margin-bottom: 0; }
body.ord-sent .shop-cart > .cc-card:has(#ord-lines) { display: block; min-height: 0; }
body.ord-sent .shop-cart #ord-lines { overflow: visible; max-height: none; padding-right: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
body.ord-sent .shop-cart #ord-lines .ord-line { margin-bottom: 0; }
body.ord-sent .shop-cart #ord-lines .ord-line.ord-sum { grid-column: 1 / -1; }
body.ord-sent .shop-cart #ord-lines > .cc-empty { grid-column: 1 / -1; }
body.ord-sent .shop-cart .shop-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (max-width: 1100px) { body.ord-sent .shop-cart, body.dash.ord-sent .shop-cart { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { body.ord-sent .shop-cart #ord-lines { grid-template-columns: minmax(0, 1fr); }
                            body.dash.ord-sent #ord-edit-page .shop-main { padding-bottom: 0; } }

/* Τα καταστήματα της ημέρας στην καρτέλα ημέρας των ταξιδιών (15/09/2026) */
.tr-shops-h { margin: 12px 0 4px; font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tr-shops { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tr-shops li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 6px 9px; border: 1px solid var(--v-line); border-left: 3px solid var(--v-line); background: var(--v-canvas); cursor: pointer; font-size: 13px; }
.tr-shops li:hover { border-left-color: var(--v-sky); }
.tr-shops li.no-card { opacity: .62; }
.tr-shops li b { font-weight: var(--w-semi); }
.tr-shops li > span > small { color: var(--cc-ink-2); }
.tr-shops li .tr-shop-c { color: var(--cc-ink-2); font-family: var(--cc-data); font-size: 11.5px; text-align: right; white-space: nowrap; }
.tr-shops-g { margin-top: 8px; font-family: var(--cc-data); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-ink-2); }

/* Αρχεία δεδομένων — Διαχείριση (15/09/2026) */
#mg-files[hidden] { display: none !important; }
.mgf { border: 1px solid var(--v-line); border-left: 4px solid var(--v-text); padding: 12px 14px; margin-top: 12px; background: var(--v-surface-1); }
.mgf h3 { margin: 0 0 6px; font-family: var(--display); text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.mgf-active { margin: 0 0 8px; font-size: 13.5px; }
.mgf-up { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; font-size: 13px; }
.mgf-pick { cursor: pointer; }
.mgf-files ul, .mgf-list ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; max-height: 260px; overflow: auto; }
.mgf-files summary, .mgf-list summary { cursor: pointer; font-size: 13px; margin-top: 6px; }
.mgf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mgf-rep { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--v-line); border-left: 4px solid var(--cc-good); background: var(--v-canvas); font-size: 13px; }
.mgf-rep.bad { border-left-color: var(--cc-bad); }
.mgf-rep.run { border-left-color: var(--v-sky); }
.mgf-rep-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgf-err { color: var(--cc-bad); margin: 6px 0; }
.mgf-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; }
.mgf-facts span i { font-style: normal; font-family: var(--cc-data); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--cc-ink-2); display: block; }
.mgf-stat { font-size: 12px; color: var(--cc-ink-2); overflow-wrap: anywhere; }
.mgf-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--v-line); border-top-color: var(--v-sky); animation: mgfspin .8s linear infinite; vertical-align: middle; margin-right: 4px; }
@keyframes mgfspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mgf-spin { animation: none; } }

/* ── 16/09 ι: ΚΑΤΑΛΟΓΟΣ ΔΙΑΦΗΜΙΣΤΙΚΟΥ ΥΛΙΚΟΥ (Στέφανος: «να επιλέγει από αυτά όταν βάζει το αίτημα») ──
   Ο πωλητής πατά ΦΩΤΟΓΡΑΦΙΑ, όχι όνομα σε λίστα· κάθε υλικό που προσθέτει παίρνει δικό του πάνελ με τα δικά του
   στοιχεία και τις δικές του φωτογραφίες. Ένα αίτημα = ένας πελάτης, πολλά υλικά. */
.mk-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.mk-mat { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--v-line); background: var(--v-canvas);
  color: var(--v-text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.mk-mat:hover, .mk-mat:focus-visible { border-color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-text); }
.mk-mat-img { display: block; aspect-ratio: 1 / 1; background: var(--v-surface-2); overflow: hidden; }
.mk-mat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mat-img svg { width: 34px; height: 34px; margin: 28% auto; display: block; opacity: .45; }
.mk-mat b { font-family: var(--display); font-size: 14px; padding: 8px 9px 0; }
.mk-mat small { font-size: 11.5px; color: var(--cc-ink-2); padding: 1px 9px 9px; line-height: 1.3; }
.mk-item { border: 1px solid var(--v-line); border-left: 3px solid var(--v-sky); background: var(--v-surface-1); padding: 10px 12px; margin-bottom: 10px; }
.mk-item > textarea { width: 100%; margin-top: 8px; }
.mk-item-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mk-item-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-item-h b { font-family: var(--display); font-size: 15px; }
.mk-item-h small { font-family: var(--cc-data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink-2); }
.mk-item-img { flex: none; width: 46px; height: 46px; border: 1px solid var(--v-line); background: var(--v-surface-2); overflow: hidden; }
.mk-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-item-img svg { width: 22px; height: 22px; margin: 11px auto; display: block; opacity: .45; }
.mk-item-view { background: var(--v-canvas); }
@media (max-width: 620px) { .mk-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }