/* ────────────────────────────────────────────────────────────────────────── MANOLI ERP — τα design tokens του έργου. ⚠️ ΑΝΤΙΚΑΤΑΣΤΑΘΗΚΕ ΟΛΟΚΛΗΡΗ Η ΠΑΛΕΤΑ, 2026-10-28. Αμέντμεντ, όχι σιωπηλή επανεγγραφή: η παλιά ήταν **βαθύ πετρόλ** (`--brand:#1C5560`) με ψυχρά ουδέτερα, διαλεγμένη από εμένα. Ο Νικόλας την αμφισβήτησε — *«I am not sure for the petrol color. I work many hours on that»* — ζήτησε έρευνα, και μετά έδειξε τα **δικά του** χρώματα: «δες και το site μου αρέσει και το background και το mint color του footer και τα χρώματα του loyalty club stages και το viber color» «ολες αυτες οι pale αποχρωσεις μου αρεσουν, θελω χρωματα στο erp να ειναι ζωντανο» «και να υπαρχει συνεπεια στα χρωματα και στις διακρισεις» ΟΛΑ ΤΑ ΧΡΩΜΑΤΑ ΕΔΩ ΕΡΧΟΝΤΑΙ ΑΠΟ ΤΟ CRM ΚΑΙ ΤΟ WEBSITE ΤΟΥ, αυτολεξεί (`wellnessr-crm/app/globals.css` και `wordpress/redesign.css`). Κάθε αντίθεση που αναγράφεται **υπολογίστηκε**, δεν εκτιμήθηκε. ΜΟΝΟ ΜΕΡΑ. *«δεν θελω για νυχτα μονο για μέρα»* — τα δύο σκοτεινά μπλοκ αφαιρέθηκαν ολόκληρα. Μην τα ξαναβάλεις χωρίς να το πει. ────────────────────────────────────────────────────────────────────────── */ /* ── Η ΓΡΑΜΜΑΤΟΣΕΙΡΑ: IBM Plex Sans, φιλοξενούμενη ΤΟΠΙΚΑ ───────────────── ⚠️ ΑΛΛΑΞΕ 2026-11-01. Αμέντμεντ, όχι σιωπηλή επανεγγραφή. Ήταν **Commissioner + EB Garamond**, οι δύο του website του. Ο Νικόλας: *«Κάτι δεν μου αρέσει με τις γραμματοσειρές όμως»*. Του δόθηκαν **τέσσερις** εκδοχές με το ίδιο ακριβώς περιεχόμενο, ίδια χρώματα και ίδια μεγέθη — άλλαζε **μόνο** η γραμματοσειρά. Διάλεξε την **IBM Plex Sans**. Γιατί στέκει η επιλογή: η Plex σχεδιάστηκε από την IBM **για οθόνες με δεδομένα** — πλατύτερα, πιο ανοιχτά γράμματα, φτιαγμένα για πολλές ώρες. Είναι ακριβώς η περίπτωσή του: κατά το `R143` η αισθητική είναι προϋπόθεση εργασίας, και δουλεύει 15-20 παραστατικά τη μέρα. Και η σερίφ **έφυγε εντελώς**: μία οικογένεια παντού, με βάρη. Η EB Garamond είναι γραμματοσειρά βιβλίου· σε εργαλείο εργοστασίου έδειχνε λογοτεχνική, και τα ελληνικά των σερίφ είναι πιο παλιομοδίτικα από τα λατινικά τους. ⚠️ ΤΑ ΕΛΛΗΝΙΚΑ ΕΛΕΓΧΘΗΚΑΝ ΠΡΙΝ ΤΗΝ ΕΠΙΛΟΓΗ, στην πηγή. Δοκιμάστηκαν 18 γραμματοσειρές· **Lato, Montserrat, Rubik και Mulish ΔΕΝ έχουν ελληνικά** και κόπηκαν αμέσως. Είναι το μάθημα της Playfair Display, εφαρμοσμένο: γραμματοσειρά δεν προτείνεται πριν επιβεβαιωθεί το ελληνικό υποσύνολο. Τοπικά και όχι από τη Google, γιατί η σελίδα πρέπει να ανοίγει στο εργοστάσιο **χωρίς internet**. **Δύο** αρχεία, **55 KB** σύνολο — τα μισά από τα 116 KB που είχαμε, επειδή η Plex είναι **variable**: ένα αρχείο καλύπτει όλα τα βάρη 400-600. Άδεια OFL — η φιλοξενία επιτρέπεται. ───────────────────────────────────────────────────────────────────────── */ @font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/plexsans-greek.woff2') format('woff2'); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF} @font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/plexsans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* ── ΤΡΙΑ ΕΠΙΠΕΔΑ ──────────────────────────────────────────────────── *«το εντελως λευκο ισως κουραζει, καλο ειναι να το χρησιμοποιουμε σαν backround για να δωσουμε εμφαση. αλλα πισω απο το λευκο να υπαρχει και άλλο background»* Είναι η δομή του CRM του, που τη γράφει αυτολεξεί: «3-layer elevation: sidebar → page → card». Μετρημένα: ιβουάρ↔άμμος 1,13:1 · άμμος↔λευκό 1,20:1. Τα επίπεδα **φαίνονται, δεν φωνάζουν**. */ --ground:#FAF8F3; /* ιβουάρ — η σελίδα (--wr-ivory) */ --card-2:#EEEAE2; /* άμμος — μπάρες, κεφαλίδες (--wr-sand) */ --card:#FFFFFF; /* λευκό — ΜΟΝΟ για έμφαση (--wr-card) */ --line:#E0DBD1; --line-soft:#ECE8E0; /* (--wr-line) */ /* ── ΜΕΛΑΝΙ ────────────────────────────────────────────────────────── Το μαύρο σε καθαρό λευκό δίνει 21:1 και **θολώνει** τα γράμματα σε υψηλή φωτεινότητα. Το μελάνι του site του δίνει 17,5:1 σε λευκό και 16,5:1 στο ιβουάρ — άφθονο, και πιο ξεκούραστο. */ --ink:#1C1916; /* 17,50:1 σε λευκό (--wr-ink) */ --ink-2:#55504A; /* 8,22:1 */ --ink-3:#6B6660; /* 5,68:1 (--wr-ink-soft) */ --ink-4:#767068; /* 4,80:1 — το κατώτατο για κείμενο */ /* ⚠️ Το δικό του `--wr-ink-mute:#9C9890` δίνει **2,87:1** και ΔΕΝ επιτρέπεται για κείμενο εδώ. Στο site το σηκώνει γιατί κάθεται σε μεγάλα μεγέθη· σε πίνακα 16px όχι. */ /* ── ΕΝΕΡΓΕΙΑ: το μπλε του Αιγαίου ────────────────────────────────── *«I think the Viber color is too much. We're gonna use it, but maybe less.»* — άρα το μωβ **δεν** είναι το κύριο χρώμα ενεργειών. Κύριο γίνεται το αιγαιοπελαγίτικο μπλε του: ήρεμο, και 7,21:1 με λευκό. */ --brand:#3A5A78; /* ηρεμία · λευκό πάνω 7,21:1 (--wr-aegean) */ --brand-2:#2E4860; /* hover · λευκό πάνω 9,49:1 */ --brand-3:#25384C; /* πάτημα · λευκό πάνω 12,01:1 */ --brand-wash:#E5ECF3; /* (--wr-aegean-light) · κείμενο brand πάνω 6,05:1 */ /* ⚠️ Η γραμμή του αιγαίου — ίδια με το `--per-aigaio-line`, γιατί το `--brand` ΕΙΝΑΙ το αιγαίο. Χρειάστηκε όταν τα πλαίσια έπαψαν να παίρνουν χρώμα περιοχής (`R245`) και το έπιασε το `PaletaTest`. */ --brand-line:#C6D6E4; /* ── ΤΟ ΧΑΡΤΙ ΤΗΣ ΚΑΡΤΑΣ ΠΑΡΑΓΩΓΗΣ (`R254`) ───────────────────────── Δύο χρώματα που **δεν είναι της οθόνης**: η κάρτα τυπώνεται με μελάνι σε χαρτί. Το ιβουάρ της εφαρμογής θα έτρωγε τόνερ χωρίς λόγο, και το μελάνι πρέπει να είναι πιο μαύρο από το `--ink` για να βγει καθαρό το QR σε φθηνό εκτυπωτή. */ --karta-charti:#FFFFFF; --karta-melani:#111111; --karta-gri:#555555; --karta-gri-2:#777777; --karta-grammi:#CCCCCC; --karta-skia:#F2F2F2; --on-brand:#FFFFFF; /* ── ΤΟΝΟΣ: το μωβ της Viber, ΛΙΓΟ ─────────────────────────────────── Το **επίσημο** μωβ `#7360F2` δίνει 4,48:1 — κόβεται στο 4,5 και δεν κρατά λευκό κείμενο. Το CRM του είχε ήδη διαλέξει το βαθύτερο. */ --accent:#665CAC; /* 5,69:1 σε λευκό (--wr-viber) */ --accent-2:#574A8A; /* 7,63:1 (--wr-viber-deep) */ --accent-wash:#F1EFFE; /* ── ΚΑΤΑΣΤΑΣΗ — τα νοήματα του CRM του, αμετάβλητα ────────────────── Η αρχή 12 του CRM του: «Color carries meaning only. If a design element uses color and the meaning of that color cannot be stated in one word, the use of color should be removed.» sage → εντάξει, ολοκληρωμένο gold → εκκρεμεί, λείπει κάτι, χρειάζεται προσοχή terra → επείγει, πρόβλημα ⚠️ ΚΑΝΟΝΑΣ ΑΠΟ ΜΕΤΡΗΣΗ: το χρώμα κατάστασης διαβάζεται πάνω σε **λευκό ή ιβουάρ** (4,48–5,34:1), αλλά **ΟΧΙ** πάνω στο δικό του απαλό φόντο (3,88–4,44:1). Εκεί χρησιμοποίησε την `-deep` εκδοχή, που δίνει 8,3–9,5:1. ⚠️ Το gold και το terra απέχουν μόλις **11,8** μονάδες — πολύ λιγότερο από τα άλλα ζεύγη. Γι' αυτό κάθε κατάσταση γράφεται **χρώμα ΚΑΙ λέξη**, ποτέ μόνο κουκκίδα. */ --ok:#567A5C; --ok-deep:#2A4E30; --ok-wash:#EAF3EC; --ok-line:#C3DDC9; --warn:#8A7020; --warn-deep:#443808; --warn-wash:#F0E8D0; --warn-line:#DCCB9E; --alarm:#A05830; --alarm-deep:#6A2E10; --alarm-wash:#F4E8DF; --alarm-line:#E0C4B2; /* ── Η ΜΕΝΤΑ ───────────────────────────────────────────────────────── Τη ζήτησε δύο φορές: *«I also want the mint color, for sure»* και *«the mint of my website footer. I want it»*. Είναι το `--wr-sage-mist` του footer του, και στο σύστημα είναι το **απαλό του εντάξει** — άρα έχει νόημα, δεν είναι διακόσμηση. ⚠️ Πάνω στο ιβουάρ φαίνεται **1,068:1** — σχεδόν αόρατη. Στο site του είναι γραμμένο με κεφαλαία τι συνέβη: η πρώτη εκδοχή είχε φόντο μέντα και «the Insider tile vanished», το έπιασε στο κινητό. Κάθε επιφάνεια σε μέντα θέλει **περίγραμμα** (`--ok-line`). */ --mint:#EAF3EC; /* === --ok-wash */ /* ── ΟΙ ΠΕΡΙΟΧΕΣ ΤΗΣ ΔΟΥΛΕΙΑΣ — ΠΕΝΤΕ ΧΡΩΜΑΤΑ, ΑΥΣΤΗΡΑ (`R218`) ───── Δική του εντολή, 2026-11-02: *«θέλω παραπάνω χρώματα, αλλά να υπάρχει **συνέπεια και συνέχεια**. Να ορίσουμε έναν κατάλογο χρωμάτων και να τον χρησιμοποιούμε με **αυστηρότητα** σε συγκεκριμένες διαδικασίες.»* Ο κανόνας είναι ένας: **το χρώμα απαντά μόνο στο «σε ποιο κομμάτι της δουλειάς είμαι»**. Η ΚΑΤΑΣΤΑΣΗ κρατά χωριστά τα δικά της τρία (ok / warn / alarm) και ποτέ δεν δανείζεται χρώμα περιοχής. Οι ομάδες του μενού είναι **δικές του λέξεις** — τις δικές μου («μπαίνει», «φεύγει») τις απέρριψε ρητά: *«δεν μου αρέσουν … είναι ερασιτεχνικές»*. Το χρώμα δένει στις ομάδες που ήδη ξέρει: καφέ → Προμηθευτές, Δέρματα αιγαίο → Διακινήσεις, Παραγωγή (= το ήδη υπάρχον --brand) πετρόλ → Απόθεμα μωβ → Πωλήσεις, Παρακαταθήκες (= το ήδη υπάρχον --accent) βυσσινί → Οικονομικά γκρι → Αρχείο — χωρίς χρώμα επίτηδες, δεν είναι καθημερινό ⚠️ ΜΕΤΡΗΜΕΝΑ, ΟΧΙ ΕΚΤΙΜΗΜΕΝΑ. Κάθε χρώμα περνά 4,5:1 και πάνω στο λευκό ΚΑΙ πάνω στο δικό του wash: χρώμα λευκό ιβουάρ wash καφέ 7,94 7,48 6,72 αιγαίο 7,21 6,79 6,05 πετρόλ 5,92 5,58 5,06 μωβ 5,69 5,36 5,02 βυσσινί 7,48 7,05 6,31 */ --per-kafe:#6B4A2F; --per-kafe-wash:#F2EBE4; --per-kafe-line:#DFD0C0; --per-aigaio:#3A5A78; --per-aigaio-wash:#E5ECF3; --per-aigaio-line:#C6D6E4; --per-petrol:#1F6F6B; --per-petrol-wash:#E2F0EF; --per-petrol-line:#BEDCDA; --per-mov:#665CAC; --per-mov-wash:#F1EFFE; --per-mov-line:#D5CFF4; --per-vissini:#8A3A52; --per-vissini-wash:#F7E8EC; --per-vissini-line:#E8C9D2; --per-gkri:#4A4F55; --per-gkri-wash:#ECEDEF; --per-gkri-line:#D7D9DC; /* ⚠️ ΠΡΟΕΠΙΛΟΓΗ ΓΙΑ ΤΟ ΤΡΕΧΟΝ ΠΡΑΓΜΑ (`R230`). ⚠️ ΑΜΕΝΤΜΕΝΤ 2026-11-03 (`R245`): το `--per` το ορίζει πια **μόνο** ο σύνδεσμος του μενού. Παντού αλλού μένει αυτή η προεπιλογή — το αιγαίο — που είναι **ακριβώς το `--brand`**. Έτσι κουμπιά και σύνδεσμοι έχουν ένα χρώμα σε όλη την εφαρμογή. Το παλιό σχόλιο έλεγε: «το ορίζει το `[data-per]` σε κάθε οθόνη και σε κάθε σύνδεσμο. Εδώ παίρνει **ουδέτερη αφετηρία**, ώστε μια οθόνη χωρίς δηλωμένο πράγμα — ο Πίνακας — να μη μένει με άχρωμο κουμπί ή αόρατη ρίγα. Το αιγαίο είναι η βάση του έργου. */ --per:var(--per-aigaio); --per-wash:var(--per-aigaio-wash); --per-line:var(--per-aigaio-line); /* ── ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ────────────────────────────────────────────────── Οι δύο του website. Οι εφεδρείες είναι γραμματοσειρές συστήματος με πλήρη ελληνικά, ώστε η οθόνη να διαβάζεται ακόμη κι αν το woff2 λείπει. */ --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; /* ΜΙΑ οικογένεια παντού. Οι τίτλοι ξεχωρίζουν με **βάρος**, όχι με άλλη γραμματοσειρά — η σερίφ έφυγε 2026-11-01 με επιλογή του Νικόλα. */ /* ⚠️ ΤΟ ΜΗΔΕΝ ΜΕ ΤΗΝ ΚΑΘΕΤΟ — άλλαξε 2026-11-01. Αμέντμεντ. Ήταν `ui-monospace,"SF Mono",Menlo,…`. Σε Mac αυτό λύνεται στην **SF Mono**, που γράφει το μηδέν με διαγώνια γραμμή. Ο Νικόλας: *«αυτό το 0 με τη γραμμή στη μέση δεν μπορώ, μου καίει τον εγκέφαλο»*. Του δόθηκαν τρεις εκδοχές — διάλεξε την **1**. Δεν μπήκε άλλη γραμματοσειρά μηχανής: η **IBM Plex Mono** έχει ΑΚΡΙΒΩΣ το ίδιο πρόβλημα (ελέγχθηκε), και η Roboto Mono θα ήταν τρίτο αρχείο για να λύσει κάτι που λύνεται με μηδέν αρχεία. Η στοίχιση των στηλών **δεν χάνεται**: τη δίνει το `font-variant-numeric:tabular-nums`, που κάνει όλα τα ψηφία ίσου πλάτους. Αυτός είναι ο λόγος που θέλαμε μηχανή — όχι η όψη. Γι΄ αυτό το `tabular-nums` μπαίνει σε **κάθε** σημείο παρακάτω. */ --mono:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; /* ── ΜΕΓΕΘΗ ────────────────────────────────────────────────────────── ⚠️ Το μάθημα του CRM του, γραμμένο εκεί: «micro/small sizes (8–18px), **where legibility was the complaint**, get a stronger +2px step». Στο site, δικά του λόγια: «too small» και «some fonts are very small». Καμία τιμή εδώ κάτω από 14px. */ --fs-lbl:13px; /* ετικέτα ΚΕΦΑΛΑΙΑ */ --fs-sm:14.5px; /* κωδικοί, βοηθητικό */ --fs:16px; /* σώμα, γραμμή πίνακα */ --fs-val:17px; /* τιμή πεδίου */ --fs-h:26px; /* τίτλος οθόνης */ --r:8px; --shadow:0 1px 2px rgba(28,25,22,.05), 0 4px 12px -6px rgba(28,25,22,.10); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:var(--fs); line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:var(--per, var(--brand)); text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--per, var(--brand)); outline-offset:2px; border-radius:2px} /* ── Σκελετός ───────────────────────────────────────────────── */ .top{ background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; } .top-in{ max-width:1120px; margin:0 auto; padding:12px clamp(14px,3vw,28px); display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .brand{ font-weight:700; letter-spacing:.14em; font-size:15px; color:var(--ink); white-space:nowrap; } .brand span{font-weight:500; letter-spacing:.06em; color:var(--ink-3); margin-left:8px; font-size:var(--fs-lbl)} .nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap} .nav a{ font-size:14px; font-weight:500; padding:6px 11px; border-radius:var(--r); color:var(--ink-2); } .nav a:hover{background:var(--card-2); text-decoration:none; color:var(--ink)} .nav a[aria-current]{background:var(--brand-wash); color:var(--brand); font-weight:600} /* ⚠️ ΤΟ ΠΛΑΤΟΣ — άλλαξε 2026-11-01, από φωτογραφία της οθόνης του. Ήταν `max-width:1120px; margin:0 auto`. Μέσα στο πλέγμα του κελύφους (232px μενού + 1fr) αυτό άφηνε **δύο** νεκρά αυλάκια: ~200px δεξιά από το μενού και ~170px στην άκρη. Ο Νικόλας: *«θα ήθελα η οθόνη να πιάνει πιο μεγάλο μέρος … να μην υπάρχει μεγάλο κενό»*. Το `margin:0` σβήνει το κεντράρισμα· το καπέλο μένει ψηλά μόνο για να μη γίνουν οι γραμμές κειμένου ατέλειωτες σε πολύ φαρδιά οθόνη. Τα κείμενα προστατεύονται ήδη χωριστά: `.lede{max-width:62ch}`. */ main{max-width:1680px; margin:0; padding:clamp(18px,2.2vw,30px) clamp(18px,2.4vw,34px) 90px} /* ── Αναζήτηση ──────────────────────────────────────────────── */ .search{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch} .search input{ flex:1 1 240px; min-width:0; font:inherit; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:17px; padding:11px 14px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r); } .search input::placeholder{color:var(--ink-4); font-family:var(--sans); font-size:15px} /* ══════════════════════════════════════════════════════════════════════ ΤΑ ΚΟΥΜΠΙΑ — ΤΕΣΣΕΡΑ ΕΙΔΗ, ΠΑΝΤΑ ΤΑ ΙΔΙΑ (`R221`) Γενική εντολή του, 2026-11-02: *«δεν θέλω links λέξεις που να πατάω, μου αρέσουν τα κουμπιά πιο πολύ. Θα ήθελα κουμπιά δηλαδή για αποθήκευση, ακύρωση, διόρθωση — **παράδειγμα σου δίνω για να φερθείς ανάλογα**. Δεν θέλω τα links που μου έχεις κάτω, θέλω κουμπιά που να φαίνονται ωραία, καθαρά.»* Η γραμμή: **κουμπί** ό,τι ΚΑΝΕΙ κάτι · **σύνδεσμος** ό,τι ΠΑΕΙ ΚΑΠΟΥ μέσα στα δεδομένα (σειριακός, κωδικός, όνομα) — αυτό είναι ο `R168` που ζήτησε ο ίδιος. Αν γίνονταν όλα κουμπιά, κάθε γραμμή πίνακα θα είχε δέκα κουμπιά και δεν θα διαβαζόταν τίποτα. Διάλεξε την **επιλογή Α**: το κύριο κουμπί γεμάτο χρώμα, τα υπόλοιπα με περίγραμμα — «φαίνεται αμέσως τι είναι η κύρια ενέργεια». ⚠️ Το κουμπί παίρνει το χρώμα της **περιοχής** όπου βρίσκεται (`R218`): αποθηκεύεις σε πετρόλ οθόνη με πετρόλ κουμπί. ══════════════════════════════════════════════════════════════════════ */ .btn{ display:inline-flex; align-items:center; gap:8px; line-height:1.2; font:inherit; font-weight:600; font-size:15px; cursor:pointer; padding:11px 20px; border-radius:var(--r); text-decoration:none; white-space:nowrap; background:var(--per, var(--brand)); color:#fff; border:1px solid var(--per, var(--brand)); } /* ⚠️ ΤΟ `text-decoration:none` ΔΕΝ ΕΙΝΑΙ ΠΕΡΙΤΤΟ — ΤΟ ΠΙΟ ΑΚΡΙΒΟ ΜΙΚΡΟ ΛΑΘΟΣ. Ο κανόνας `a:hover{text-decoration:underline}` έχει μεγαλύτερη ειδικότητα από το `.btn` (0,1,1 έναντι 0,1,0), άρα **κάθε κουμπί που είναι σύνδεσμος** υπογραμμιζόταν μόλις περνούσε το ποντίκι — σε όλη την εφαρμογή, όχι σε μία οθόνη. Ο Νικόλας: *«το κουμπί διόρθωση δεν το θέλω να υπογραμμίζετε κάτω σαν link θέλω ένα κουμπί ωραίο όχι λινκ τσουρουτικο»*. Το `R221` λέει «ενέργεια = κουμπί, σύνδεσμος = πλοήγηση»· η υπογράμμιση το έσπαγε οπτικά ακόμη κι όπου ο κώδικας ήταν σωστός. */ .btn:hover,.btn:focus-visible,.btn:active{text-decoration:none} .btn:hover{filter:brightness(.90)} .btn:focus-visible{outline:2px solid var(--per, var(--brand)); outline-offset:3px} /* ── δεύτερο: ενέργεια, αλλά όχι η κύρια ── */ .btn.deytero{ background:var(--card); color:var(--per, var(--brand)); border-color:var(--per-line, var(--line)); } .btn.deytero:hover{background:var(--per-wash, var(--card-2)); filter:none} /* ── ήσυχο: πίσω, άκυρο ── */ .btn.quiet{background:transparent; color:var(--ink-2); border-color:var(--line)} .btn.quiet:hover{background:var(--card-2); color:var(--ink); filter:none} /* ── κίνδυνος: σβήνει. Ποτέ γεμάτο κόκκινο — δεν τραβά το μάτι κατά λάθος. */ .btn.kindynos{background:var(--card); color:var(--alarm-deep); border-color:var(--alarm-line)} .btn.kindynos:hover{background:var(--alarm-wash); filter:none} /* ── μικρό: μέσα σε συρτάρι, σε γραμμή πίνακα, σε σελιδοποίηση ── */ .btn.mikro{font-size:var(--fs-sm); padding:6px 13px; border-radius:7px} /* Η σειρά είναι πάντα ίδια: κύριο, δεύτερο, …, κενό, ήσυχο/κίνδυνος. */ .koumpia{display:flex; gap:10px; flex-wrap:wrap; align-items:center} .koumpia .keno{flex:1} /* ── Τίτλοι ─────────────────────────────────────────────────── */ /* Ο τίτλος ξεχωρίζει με βάρος, στην ίδια γραμματοσειρά. */ h1{font-family:var(--sans); font-weight:600; font-size:clamp(26px,4vw,36px); line-height:1.12; margin:0 0 6px; letter-spacing:-.005em} h2{font-size:var(--fs-lbl); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px} .lede{color:var(--ink-2); margin:0 0 26px; max-width:62ch} /* ── Κάρτες ─────────────────────────────────────────────────── */ .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(16px,2.4vw,22px); box-shadow:var(--shadow); } /* ⚠️ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΟΥΣ ΠΙΝΑΚΕΣ — ζητήθηκε 2026-11-01. Ο Νικόλας: *«στον πίνακα κάτω που είναι οι κινήσεις, άσε λίγο κενό, λίγο χώρο ανάμεσα στους πίνακες»*. Υπήρχε κανόνας `.card + .card` — αλλά ο πίνακας των κινήσεων έρχεται μετά από **πλέγμα**, όχι μετά από κάρτα, οπότε δεν έπιανε ποτέ και οι δύο ακουμπούσαν. Ο δεύτερος κανόνας το καλύπτει. */ .card + .card{margin-top:22px} .grid + .card, .card + .grid, .grid + .grid{margin-top:26px} .grid{display:grid; gap:18px; grid-template-columns:minmax(0,1fr)} @media (min-width:880px){ .grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } @media (min-width:880px){ .grid.side{grid-template-columns:minmax(0,340px) minmax(0,1fr)} } /* ── Η ταυτότητα της γούνας ─────────────────────────────────── */ .hero{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin:0 0 22px} .seiriakos{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.01em; font-size:clamp(34px,6vw,52px); line-height:1; color:var(--ink); } /* ⚠️ Ο ΤΙΤΛΟΣ ΔΕΝ ΣΠΑΕΙ ΣΕ ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ — 2026-11-01. Ο Νικόλας: *«θέλω ο τίτλος που φαίνεται πάνω να μην αλλάζει γραμμή, να φαίνεται ολόκληρος και το μοντέλο»*. Το «Mink Female Stucco Coat with Collar Marten EIR-101/C» έσπαγε και το «EIR-101/C» έπεφτε μόνο του. Αιτία: το `.hero-meta` ήταν στριμωγμένο ανάμεσα στον σειριακό και τα σήματα. Με `flex:1 1 420px` παίρνει ό,τι περισσεύει, και τα σήματα κατεβαίνουν μόνα τους σε στενή οθόνη (το `.hero` έχει ήδη wrap). */ .hero-meta{display:flex; flex-direction:column; gap:5px; padding-top:5px; flex:1 1 420px; min-width:0} .eidos{font-size:clamp(17px,2.4vw,21px); font-weight:600; line-height:1.25} .kodikos{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); color:var(--ink-3)} /* ⚠️ ΤΑ ΣΗΜΑΤΑ ΚΑΤΩ ΑΠΟ ΤΟΝ ΚΩΔΙΚΟ — μετακινήθηκαν 2026-11-01. Ήταν `margin-left:auto`, δηλαδή σπρωγμένα στην πάνω δεξιά γωνία. Μέσα στο `.hero-meta` (που είναι στήλη) το `auto` θα τα έσπρωχνε πάλι δεξιά, γι΄ αυτό φεύγει. Ο Νικόλας: *«για να μην κοιτάζω πάνω δεξιά»*. */ .badges{display:flex; gap:7px; flex-wrap:wrap; margin-top:4px} .badge{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:2px; border:1px solid; white-space:nowrap; } .badge.ok{color:var(--ok); background:var(--ok-wash); border-color:var(--ok-line)} .badge.warn{color:var(--warn); background:var(--warn-wash); border-color:var(--warn-line)} .badge.alarm{color:var(--alarm); background:var(--alarm-wash); border-color:var(--alarm-line)} .badge.calm{color:var(--ink-2); background:var(--card-2); border-color:var(--line)} /* ── Ζεύγη κλειδί/τιμή ──────────────────────────────────────── */ dl.pairs{margin:0; display:grid; gap:0} dl.pairs > div{ display:grid; gap:2px 14px; grid-template-columns:1fr; padding:9px 0; border-bottom:1px solid var(--line-soft); } dl.pairs > div:last-child{border-bottom:none} @media (min-width:520px){ dl.pairs > div{grid-template-columns:minmax(0,150px) minmax(0,1fr)} } dl.pairs dt{font-size:14px; color:var(--ink-3)} dl.pairs dd{margin:0; font-weight:500} dl.pairs dd.m{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500} dl.pairs dd.empty{color:var(--ink-4); font-weight:400; font-style:italic} /* ── Πίνακες ────────────────────────────────────────────────── */ .scroll{overflow-x:auto; margin:0 -4px; padding:0 4px} table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums} thead th{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 12px 9px 0; white-space:nowrap; border-bottom:1px solid var(--line); } /* ⚠️ ΙΔΙΟ ΥΨΟΣ ΣΕ ΚΑΘΕ ΓΡΑΜΜΗ — *«και τα rows που εκανες να ειναι ιδια σε υψος»*. Το `nowrap` είναι ο μηχανισμός: αρκεί **ένα** κελί να τυλιχτεί σε δεύτερη γραμμή και η γραμμή ψηλώνει. Ο πίνακας κυλάει οριζόντια μέσα στο `.scroll`, άρα τίποτα δεν κόβεται. */ tbody td{padding:0 14px 0 0; height:44px; border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap} tbody tr:last-child td{border-bottom:none} td.m,th.m{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap} td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap} td.sub{color:var(--ink-3); font-size:var(--fs-sm)} /* ⭐ Η ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΡΟΥΧΟΥ ΚΑΙ ΤΟΥ ΔΕΡΜΑΤΟΣ — ΜΕΓΑΛΥΤΕΡΗ, ΠΑΝΤΟΥ (`R266`). Δική του εντολή, 2026-11-04: *«θα ήθελα την περιγραφή της γούνας / δερμάτων λίγο πιο μεγάλα γράμματα — **όπου υπάρχει η περιγραφή**, μη στα λέω ένα ένα: δελτία, αποθήκη, παραστατικά, **παντού**»*. ── ΓΙΑΤΙ 17 ΚΑΙ ΟΧΙ 18 ─────────────────────────────────────────────── Του δόθηκαν τέσσερα μεγέθη σε preview και διάλεξε τη σύσταση. Ο λόγος είναι μετρημένος στις **6.386** περιγραφές του: μέσο μήκος **44** χαρακτήρες, μεγαλύτερη **74**. Στα 18px οι μακριές τυλίγονται σε δεύτερη σειρά σε στενή οθόνη, και οι γραμμές του πίνακα χάνουν το ίδιο ύψος — ακριβώς το πρόβλημα που μόλις λύθηκε (`R265`). Στα 17 η μεγαλύτερη χωράει ακόμη σε μία σειρά. ── ΚΑΙ ΤΟ ΜΕΛΑΝΙ, ΟΧΙ ΜΟΝΟ ΤΟ ΜΕΓΕΘΟΣ ─────────────────────────────── Στα παραστατικά η περιγραφή ήταν `td.sub`: **14,5px και γκρι**, φτιαγμένη για «δευτερεύουσα» πληροφορία. Δεν είναι δευτερεύουσα — είναι **τι είναι το ρούχο**. Παίρνει πλήρες μελάνι. ⚠️ ΜΙΑ ΚΛΑΣΗ, ΟΧΙ ΔΕΚΑ ΣΗΜΕΙΑ. Η περιγραφή εμφανιζόταν σε **εννέα** οθόνες με **τρία** διαφορετικά μεγέθη. Από εδώ και πέρα κάθε κελί περιγραφής φοράει `perigrafi` και αλλάζει **εδώ** (`D-142`). */ td.perigrafi, table.grammes-parastatikou td.ti{font-size:17px; color:var(--ink)} td.perigrafi a, table.grammes-parastatikou td.ti a{color:inherit} /* ⭐ Η ΜΟΝΑΔΑ ΔΙΠΛΑ ΣΤΟΝ ΑΡΙΘΜΟ — «2 τεμάχια», «124 δέρματα» (`R254`). Δική του επιλογή «Α» από δύο που είδε σε preview: μία στήλη με τη λέξη, αντί για δύο στήλες με σκέτους αριθμούς. Η λέξη είναι πιο αχνή και μικρότερη ώστε να κερδίζει ο αριθμός — αλλά **όχι κάτω από 13px**, που είναι το όριο αναγνωσιμότητας του έργου. */ td .monada{color:var(--ink-3); font-size:13.5px; font-family:var(--sans); margin-left:4px} tbody tr:hover{background:var(--card-2)} /* ── Σημειώσεις και κενά ────────────────────────────────────── */ .note{ border-left:3px solid var(--line); padding:2px 0 2px 14px; color:var(--ink-2); font-size:14.5px; margin:14px 0 0; } .note.warn{border-left-color:var(--warn)} .note.alarm{border-left-color:var(--alarm)} .note.ok{border-left-color:var(--ok)} .empty-state{ padding:34px 20px; text-align:center; color:var(--ink-3); background:var(--card-2); border:1px dashed var(--line); border-radius:var(--r); } .empty-state strong{display:block; color:var(--ink); font-size:17px; margin-bottom:6px} /* ── Το ΜΟΝΤΕΛΟ ───────────────────────────────────────────────── «το μοντελο δεν βλεπω... πολύ βασικό» — Νικόλας, βλέποντας την πρώτη έκδοση της καρτέλας. Είναι ο τρόπος που αναγνωρίζει τι είναι μια γούνα, άρα παίρνει τη θέση και το βάρος που του αναλογούν: αμέσως κάτω από τον σειριακό, πριν από την αγγλική περιγραφή. */ .tautotita{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:5px} .montelo{display:flex; align-items:baseline; gap:9px} .montelo-et{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .montelo-v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:clamp(18px,2.6vw,23px); letter-spacing:-.01em; color:var(--brand); } /* Το χρώμα έχει όνομα, όχι κωδικό («Blackglama», όχι «0012») — άρα γράφεται σαν λέξη, όχι σαν κωδικός. */ .montelo-v.chroma{font-family:var(--sans); font-weight:700; letter-spacing:0} .montelo-v.keno{ font-family:var(--sans); font-weight:400; font-size:15px; font-style:italic; color:var(--ink-4); } /* Η παραλλαγή του πατρόν: «1849» + «με γιακά». Δηλώνεται ΜΙΑ φορά και ο κλασικός κωδικός «1849/C» παράγεται — «δηλώνεται 2 φορες ουσιαστικα». */ .parallagi{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:2px; white-space:nowrap; color:var(--brand); background:var(--brand-wash); border:1px solid var(--brand); } /* Η ανανεωμένη έκδοση του πατρόν — «NEW». Ξεχωρίζει από την παραλλαγή γιακά/κουκούλας, γιατί είναι άλλου είδους πληροφορία: ποια ΕΚΔΟΣΗ του σχεδίου, όχι ποια παραλλαγή του. */ .parallagi.ekdosi{ color:var(--warn); background:var(--warn-wash); border-color:var(--warn-line); } /* ────────────────────────────────────────────────────────────────────────── Ο ΠΙΝΑΚΑΣ (dashboard) — «the most important things that I work most». Καμία απόχρωση εδώ δεν γράφεται ωμή: όλα από τα tokens, και το test `PaletaTest` αποτυγχάνει αν κάποιος ξεχάσει (R139). ────────────────────────────────────────────────────────────────────────── */ .synola{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:0 0 20px; } .synolo{ background:var(--card); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:12px; padding:14px 16px; } /* Η ρίγα γίνεται πορτοκαλί μόνο όταν υπάρχει όντως κάτι — όχι διακοσμητικά. */ .synolo.prosochi{border-left-color:var(--warn)} .synolo .k{ display:block; font-size:var(--fs-lbl); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 4px; } .synolo .n{ display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:30px; font-weight:600; line-height:1.05; color:var(--ink); } .synolo .y{display:block; font-size:var(--fs-sm); color:var(--ink-3); margin:4px 0 0} ul.ergasies{list-style:none; margin:0; padding:0} ul.ergasies li{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--line-soft); } ul.ergasies li:first-child{border-top:0; padding-top:4px} ul.ergasies .sima{width:10px; height:10px; border-radius:50%; flex:none; margin-top:9px} ul.ergasies li.alarm .sima{background:var(--alarm)} ul.ergasies li.warn .sima{background:var(--warn)} ul.ergasies .plithos{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; min-width:68px; text-align:right; color:var(--ink); } ul.ergasies .keimeno{flex:1; min-width:0} ul.ergasies .keimeno strong{display:inline; font-size:var(--fs-val); font-weight:600} /* Χρώμα ΚΑΙ λέξη, πάντα μαζί: το gold και το terra απέχουν 11,8 μονάδες. */ ul.ergasies .lexi{ display:inline-block; margin-left:9px; padding:2px 10px; border-radius:999px; font-size:var(--fs-lbl); font-weight:600; vertical-align:2px; } ul.ergasies li.alarm .lexi{background:var(--alarm-wash); color:var(--alarm-deep)} ul.ergasies li.warn .lexi{background:var(--warn-wash); color:var(--warn-deep)} ul.ergasies .giati{display:block; font-size:var(--fs-sm); color:var(--ink-3); margin:4px 0 0} @media (max-width:560px){ ul.ergasies li{gap:10px} ul.ergasies .plithos{font-size:20px; min-width:54px} } /* ────────────────────────────────────────────────────────────────────────── ΤΟ ΑΠΟΘΕΜΑ — «when i have many data i want to see them in rows». ────────────────────────────────────────────────────────────────────────── */ .filtra{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0} .filtro{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-size:var(--fs-sm); font-weight:500; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--ground); color:var(--ink-2); } .filtro:hover{border-color:var(--per, var(--brand))} /* Ενεργό = μπλε, γιατί πατιέται. Τίποτα άλλο δεν είναι μπλε (R139). */ .filtro.energo{background:var(--per-wash, var(--brand-wash)); border-color:var(--per, var(--brand)); color:var(--per, var(--brand)); font-weight:600} .filtro .b{font-family:var(--mono); font-variant-numeric:tabular-nums; opacity:.72} table.apothema tbody tr:nth-child(even) td{background:var(--ground)} table.apothema tbody tr:hover td{background:var(--brand-wash)} /* Η επικεφαλίδα ομάδας μένει κολλημένη όταν κατεβαίνεις: χωρίς αυτήν, μετά από 30 γραμμές δεν ξέρεις σε ποιο στάδιο κοιτάς. */ table.apothema tr.omada td{ position:sticky; top:0; z-index:2; background:var(--card-2); color:var(--ink); font-weight:600; border-bottom:1px solid var(--line); border-top:1px solid var(--line); } table.apothema tr.omada .plithos{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-3); font-weight:500; margin-left:10px; font-size:var(--fs-sm); } .katastasi{display:inline-flex; align-items:center; gap:7px; font-weight:500; white-space:nowrap} .katastasi i{width:9px; height:9px; border-radius:50%; flex:none} .katastasi.ok{color:var(--ok)} .katastasi.ok i{background:var(--ok)} .katastasi.warn{color:var(--warn)} .katastasi.warn i{background:var(--warn)} .katastasi.alarm{color:var(--alarm)} .katastasi.alarm i{background:var(--alarm)} nav.selides{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:16px 0 0; padding:13px 0 0; border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink-3); } nav.selides a{color:var(--per, var(--brand)); font-weight:600; text-decoration:none} nav.selides a:hover{text-decoration:underline} nav.selides strong{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink)} /* ────────────────────────────────────────────────────────────────────────── ΤΟ ΜΕΝΟΥ ΣΤΟ ΠΛΑΙ — απόφαση του Νικόλα, 29/10/2026. «ας βαλουμε το μενου στο dashboard στο πλαι και θα το διαμορφωσουμε σιγα σιγα να με βολευει» Σε στενή οθόνη (τάμπλετ στο εργοστάσιο, κινητό) γίνεται οριζόντια λωρίδα που κυλάει: η ράγα των 232px θα έτρωγε το μισό πλάτος. ────────────────────────────────────────────────────────────────────────── */ /* ⚠️ `minmax(0,1fr)` ΚΑΙ ΟΧΙ `1fr` — ΜΕΤΡΗΜΕΝΟ 2026-11-06. Το σκέτο `1fr` σημαίνει `minmax(auto,1fr)`: η στήλη **δεν συρρικνώνεται** κάτω από το πλάτος του περιεχομένου της. Αποτέλεσμα σε κινητό 390px: ο πίνακας φούσκωνε όλη τη σελίδα και το κινητό τη ζούμαρε έξω. Μετρημένο σε δέκα οθόνες πριν τη διόρθωση: 975–1.193px πλάτος σε οθόνη 390px — δηλαδή γράμματα στο ένα τρίτο. Ήταν η **δομική** αιτία του πιο συχνού παραπόνου του, «μικρά γράμματα», σε κινητό. Με το `minmax(0,…)` το `.scroll` κάνει επιτέλους τη δουλειά του: κυλάει ο πίνακας, όχι η σελίδα. */ .shell{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh} aside.raga{ display:flex; flex-direction:column; background:var(--card-2); border-right:1px solid var(--line); } /* ⚠️ ΤΟ ΛΟΓΟΤΥΠΟ, ΟΧΙ ΚΕΙΜΕΝΟ — 2026-11-01. Εδώ έγραφε «MANOLI Γουναρικά» σε γράμματα· ο Νικόλας το απέρριψε και έδωσε το δικό του σήμα. Από τις τέσσερις εκδοχές διάλεξε το **σκέτο σήμα**. Το ύψος είναι **60px**. Ξεκίνησε στα 34px και ο Νικόλας το απέρριψε αμέσως — *«Το θέλω πιο μεγάλο το λογότυπο»*. Το σήμα είναι τετράγωνο, άρα 60px ύψος = 60px πλάτος· το μενού δίνει 196px καθαρά (232 μείον δύο φορές 18 περιθώριο), οπότε υπάρχει περιθώριο να μεγαλώσει κι άλλο αν το ζητήσει. Οι λεπτές ρίγες του σήματος κερδίζουν από το μέγεθος. Το `width/height` στο ίδιο το `` είναι οι **αληθινές** διαστάσεις του κομμένου αρχείου (367×362) — κρατούν τη θέση πριν φορτώσει η εικόνα, ώστε το μενού να μην αναπηδά. Το CSS από κάτω τις ξαναγράφει. */ aside.raga .brand{ padding:16px 18px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; min-height:88px; } aside.raga .brand img{display:block; width:auto; height:60px} aside.raga .brand:hover{text-decoration:none; opacity:.78} aside.raga .brand span{ display:block; font-family:var(--sans); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.06em; color:var(--ink-3); margin-top:2px; } aside.raga nav{display:flex; flex-direction:column; padding:8px 8px; gap:1px; overflow-y:auto} aside.raga nav .omada{ font-size:var(--fs-lbl); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); font-weight:600; padding:13px 12px 4px; } aside.raga nav .omada:first-child{padding-top:6px} /* ⚠️ «the menu should not change color, only underlined» — δικά του λόγια στο CRM του. Στο πλάι η «γραμμή» γίνεται ΡΙΓΑ στα αριστερά: το ίδιο νόημα, στη διάταξη που ταιριάζει (R139). */ aside.raga nav a{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--r); color:var(--ink-2); font-size:var(--fs); font-weight:500; border-left:3px solid transparent; text-decoration:none; } aside.raga nav a:hover{background:var(--ground)} /* ⚠️ ΤΟ ΕΝΕΡΓΟ ΔΕΝ ΕΧΕΙ ΔΙΚΗ ΤΟΥ ΡΙΓΑ (`R225`). Ο Νικόλας, 2026-11-02: *«μπροστά από τους προμηθευτές βλέπω στο ταμπελάκι **τρία-τέσσερα χρώματα μαζί**, κάτι δεν πάει καλά εκεί.»* Στοιβάζονταν **τρεις** ρίγες στο ίδιο σημείο: 4px η μπάρα της ομάδας (`.omada-block`, καφέ) 3px η παλιά ρίγα του ενεργού (`--brand`, **μπλε**) 3px η νέα ρίγα του ενεργού (`--per`, καφέ) Δέκα pixel σε δύο χρώματα. Η μπάρα της ομάδας αρκεί — το ενεργό ξεχωρίζει με το **λευκό πλακίδιο** και το βάρος, που είναι και ο κανόνας του `R139`: *«the menu should not change color»*. */ aside.raga nav a[aria-current]{ background:var(--card); border-left-color:transparent; color:var(--ink); font-weight:600; } /* ── ΟΙ ΣΥΝΔΕΣΜΟΙ ΠΟΥ ΔΕΝ ΧΤΙΣΤΗΚΑΝ ΑΚΟΜΗ ──────────────────────────────── Απόφαση του Νικόλα, 2026-11-01: *«Να φαίνονται σβηστοί»*. Το μενού έχει **23 σημεία** και δουλεύουν **3** — βλέπει όλο το σχέδιο από την πρώτη μέρα και ξέρει τι έρχεται. Είναι ``, **όχι** ``: δεν πατιέται, δεν έχει focus, δεν βγάζει σελίδα σφάλματος. Η εναλλακτική — άδεια σελίδα «αυτό χτίζεται» — θα απαιτούσε 20 διαδρομές που δεν κάνουν τίποτα. Πυκνότερα από τα ενεργά **επίτηδες**: δεν τα πατάς, άρα δεν χρειάζονται χώρο για δάκτυλο. Έτσι χωρούν και τα 23 χωρίς να κυλάει το μενού σε φορητό. Το μέγεθος μένει στο `--fs-lbl` (13px) — ο κανόνας των 13 δεν σπάει ούτε για σβηστό κείμενο. */ aside.raga nav .erxetai{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 12px 5px 15px; font-size:var(--fs-lbl); color:var(--ink-4); border-left:3px solid transparent; cursor:default; } aside.raga nav .erxetai::after{ content:'σύντομα'; font-size:var(--fs-lbl); color:var(--ink-4); opacity:.65; letter-spacing:.02em; } aside.raga .katw{ margin-top:auto; padding:13px 20px; font-size:var(--fs-sm); color:var(--ink-3); border-top:1px solid var(--line); } @media (max-width:760px){ .shell{grid-template-columns:minmax(0,1fr)} aside.raga{ flex-direction:row; align-items:center; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:0 8px; } aside.raga .brand, aside.raga .katw, aside.raga nav .omada, aside.raga nav .erxetai{display:none} aside.raga nav{flex-direction:row; padding:6px 0} aside.raga nav a{border-left:0; border-bottom:3px solid transparent; white-space:nowrap} aside.raga nav a[aria-current]{border-left:0; border-bottom-color:var(--brand)} /* ⚠️ Η ΕΞΟΔΟΣ ΔΕΝ ΚΡΥΒΕΤΑΙ ΣΤΟ ΤΑΜΠΛΕΤ (`R269`). Το `.katw` έκρυβε το όνομα στα στενά — σωστό όσο ήταν διακοσμητικό. Τώρα κρατά το **κουμπί εξόδου**: κρυμμένο, κανείς δεν βγαίνει από το τάμπλετ της παραγωγής. Μπαίνει στη σειρά του μενού, στο τέλος, συμπαγές. */ aside.raga .katw.me-exodo{ display:flex; margin:0 0 0 auto; padding:6px 4px 6px 12px; border-top:0; gap:8px; flex:0 0 auto; } aside.raga .katw.me-exodo strong{white-space:nowrap} } /* ── Η ΑΛΥΣΙΔΑ ΣΤΑΔΙΩΝ ΣΤΗΝ ΚΑΡΤΕΛΑ ──────────────────────────────────── Προστέθηκε 2026-11-01. Ο Νικόλας, κοιτάζοντας καρτέλες: *«control που βλέπω δύο φορές πρέπει να δεις»* και *«τα στάδια δεν είναι με τη σειρά»*. Το βέλος δείχνει **τι τελείωσε και πού πήγε**: «ΚΟΨΙΜΟ → ΡΑΨΙΜΟ» διαβάζεται «ο τεχνίτης ολοκλήρωσε το ΚΟΨΙΜΟ και το έστειλε ΡΑΨΙΜΟ» (`R157`). Χωρίς αυτό, το όνομα καθόταν δίπλα στο στάδιο που *αρχίζει* και έμοιαζε λάθος, ενώ τα δεδομένα ήταν σωστά. Τα δύο σημάδια λύνουν το «CONTROL δύο φορές»: η μία γραμμή είναι «μπήκε» και η άλλη «ολοκληρώθηκε» — δεν είναι διπλοεγγραφή, είναι το σκανάρισμα που βγάζει τη γούνα από την παραγωγή (`R155`). */ .alysida{white-space:nowrap} .alysida .velos{color:var(--ink-4); margin:0 5px} .simadi{ display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; font-size:var(--fs-lbl); font-weight:600; vertical-align:1px; } .simadi.mpike{background:var(--brand-wash); color:var(--brand)} .simadi.teleiose{background:var(--ok-wash); color:var(--ok-deep)} /* ── ΤΟ ΚΟΥΤΙ ΤΗΣ ΤΙΜΗΣ ───────────────────────────────────────────────── Προστέθηκε 2026-11-01. Ο Νικόλας: *«όπως και την τιμή που δεν βλέπω»*. Ήταν μία γραμμή μέσα στα χαρακτηριστικά και κρυβόταν ανάμεσα σε μάκρος και μανίκι. Η τελευταία τιμή είναι το νούμερο που κοιτάει· οι προηγούμενες υπάρχουν γιατί 979 γούνες έχουν πάνω από μία (`R146`). */ .timi-tora{display:flex; align-items:baseline; gap:12px; margin:0 0 14px; flex-wrap:wrap} .timi-tora .poso{ font-size:clamp(26px,3.2vw,32px); font-weight:600; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; } .timi-tora .pote{font-size:var(--fs-sm); color:var(--ink-3)} .istoriko{display:flex; flex-direction:column} .istoriko .gr{ display:flex; gap:12px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line-soft); font-size:15px; font-variant-numeric:tabular-nums; } .istoriko .gr .d{color:var(--ink-3); flex:0 0 88px; font-size:var(--fs-sm)} .istoriko .gr .t{font-weight:600; flex:0 0 100px; text-align:right} .istoriko .gr .pou{color:var(--ink-3); font-size:var(--fs-sm); min-width:0} /* Η ισχύουσα ξεχωρίζει — είναι αυτή που μετράει σε κάθε νέα κίνηση. */ .istoriko .gr.now .t{color:var(--brand)} /* Ελεύθερο κείμενο που δεν χωράει σε στήλη — τυλίγεται και πιάνει πλάτος. Οι «ειδικές οδηγίες» φτάνουν τους 100 χαρακτήρες με μέτρα και οδηγίες κοπτικής· σε στενό `dd` γίνονταν τέσσερις γραμμές ανάγνωσης. */ dl.pairs > div.plati{flex-direction:column; gap:3px; align-items:stretch} dl.pairs > div.plati dd{white-space:normal; line-height:1.5} /* Στήλη που στοιβάζει κάρτες — η δεξιά πλευρά της καρτέλας κρατά την τιμή και τα δέρματα τη μία κάτω από την άλλη, αντί να αφήνει κενό. */ .grid.two > .stili{display:flex; flex-direction:column; gap:18px; min-width:0} /* ── ΟΠΤΙΚΕΣ ΑΓΚΥΡΕΣ ΣΤΗΝ ΚΑΡΤΕΛΑ — ζητήθηκαν 2026-11-01 ─────────────── 1 · ΤΟ ΠΡΩΤΟ ΣΤΑΔΙΟ ΕΝΤΟΝΟ. Ο Νικόλας: *«εκεί που φαίνονται οι κινήσεις της παραγωγής το πρώτο στάδιο να το κάνεις με πιο έντονα γράμματα, για να ξέρω και τον τεχνίτη. Δηλαδή όταν πάει από μοντάρισμα σε φοδράρισμα, το μοντάρισμα να είναι έντονο για να ξέρω ότι δίπλα ο τεχνίτης ήταν αυτός που το μοντάρισε. Με βοηθάει οπτικά αυτό.»* Είναι ακριβώς ο `R157` γινωμένος ορατός: ο τεχνίτης ανήκει στο στάδιο που **ολοκληρώθηκε** — το αριστερό. Το βάρος δένει τα δύο κελιά μεταξύ τους χωρίς λεζάντα. 2 · Ο ΠΕΛΑΤΗΣ ΞΕΧΩΡΙΖΕΙ. *«θα ήθελα το όνομα του πελάτη πιο έντονο»* — και πάνω δεξιά *«ίσως με κάποιο background από πίσω, διάλεξε ένα από τα χρώματα που έχουμε»*. Διαλέχτηκε το **μωβ** (`--accent-wash` / `--accent-2`): είναι το δεύτερο χρώμα της παλέτας του, κρατημένο ακριβώς για τέτοιες στιγμές — *«I think the Viber color is too much. We're gonna use it, but maybe less»*. Το μπλε είναι ήδη το χρώμα των ενεργειών και θα μπερδευόταν· το πράσινο σημαίνει «εντάξει». Ο πελάτης δεν είναι ούτε ενέργεια ούτε κατάσταση — είναι **ταυτότητα**. Αντίθεση κειμένου σε φόντο: 7,63:1. */ .alysida strong{font-weight:600; color:var(--ink)} .pelatis{font-weight:600; color:var(--ink)} .badge.pelatis{ background:var(--accent-wash); color:var(--accent-2); border-color:transparent; font-weight:600; } /* Σύνδεσμος ταυτότητας (`R168`): δείχνει πατήσιμος **χωρίς** να φωνάζει. Υπογράμμιση μόνο στο πέρασμα — σε μια καρτέλα γεμάτη ονόματα, μόνιμες μπλε υπογραμμίσεις παντού θα έκαναν τη σελίδα θορυβώδη. */ /* ⚠️ Ο ΣΥΝΔΕΣΜΟΣ ΔΕΝ ΚΛΕΒΕΙ ΤΟ ΧΡΩΜΑ — διορθώθηκε 2026-11-01. Το πρώτο `a.montelo-v{color:inherit}` έσβησε το μπλε που είχαν ήδη το μοντέλο και το χρώμα. Ο Νικόλας: *«θα ήθελα τα γράμματα να παραμείνουν χρωματιστά, του μοντέλου και του χρώματος, όπως τα είχες πριν»*. Ήταν σωστός: εκεί το χρώμα **σημαίνει** κάτι — είναι η ταυτότητα της γούνας, όχι απλό κείμενο. Το `inherit` είναι σωστό μέσα σε πίνακα, όχι σε κεφαλίδα. */ a.montelo-v{text-decoration:none; border-bottom:1px dashed var(--line)} a.montelo-v:hover{border-bottom-color:currentColor; filter:brightness(.85)} /* ⚠️ ΤΟ ΕΝΤΟΝΟ ΕΧΑΝΕ ΜΕΣΑ ΣΕ ΜΙΚΡΟ ΓΚΡΙ ΚΕΛΙ — διορθώθηκε 2026-11-01. Μπήκε το `` στο στάδιο και ο `.pelatis` στον πελάτη, αλλά το κελί είναι `td.sub{color:var(--ink-3); font-size:var(--fs-sm)}` — **μικρό και γκρι**. Το βάρος εφαρμοζόταν· απλώς δεν φαινόταν. Ο Νικόλας το ζήτησε για συγκεκριμένο λόγο: *«για να ξέρω ότι δίπλα ο τεχνίτης ήταν αυτός που το μοντάρισε. Με βοηθάει οπτικά αυτό»*. Αν δεν ξεχωρίζει, δεν κάνει τη δουλειά του. Τρία μαζί, ώστε το μάτι να δένει τα δύο κελιά: · το στάδιο που ολοκληρώθηκε παίρνει κανονικό μέγεθος και πλήρες μελάνι · ο τεχνίτης δίπλα παύει να είναι «δευτερεύων» · ο πελάτης το ίδιο, όπου κι αν εμφανίζεται */ td.alysida strong{font-size:var(--fs-val); font-weight:600; color:var(--ink)} td.texnitis{color:var(--ink); font-weight:500} td .pelatis, td.sub .pelatis{font-size:var(--fs-val); font-weight:600; color:var(--ink)} /* Σύνδεσμοι ταυτότητας μέσα σε πίνακα (`R168`): παίρνουν το χρώμα του κελιού και υπογραμμίζονται μόνο στο πέρασμα. Μια καρτέλα με έξι μπλε υπογραμμίσεις ανά γραμμή είναι αχρείαστα θορυβώδης — το ζητούμενο είναι να **πατιούνται**, όχι να διαφημίζονται. */ tbody td a{color:inherit; text-decoration:none} /* ⚠️ Ο ΣΥΝΔΕΣΜΟΣ ΠΑΙΡΝΕΙ ΤΟ ΧΡΩΜΑ ΤΟΥ ΠΡΑΓΜΑΤΟΣ ΠΟΥ ΑΝΟΙΓΕΙ (`R230`). Προεπιλογή: το χρώμα της οθόνης — μέσα σε λίστα τεμαχίων οι σειριακοί είναι πετρόλ χωρίς να το πει κανείς. Όταν ο σύνδεσμος **φεύγει σε άλλο πράγμα** (ο πελάτης μέσα σε λίστα χαρτιών), δηλώνει `data-per` και παίρνει το δικό του. */ tbody td a:hover{color:var(--per, var(--brand)); text-decoration:underline} tbody td a[data-per]{color:var(--per)} tbody td a[data-per]:hover{text-decoration:underline} a.badge{text-decoration:none} a.badge:hover{border-color:var(--per, var(--brand)); color:var(--per, var(--brand))} /* ⚠️ Η ΚΑΡΤΑ ΤΑΥΤΟΤΗΤΑΣ ΜΙΚΡΑΙΝΕΙ — *«μπορεί να μικρύνει και λίγο η κάρτα»*. Έχασε την επικεφαλίδα της και δύο γραμμές διπλής πληροφορίας, άρα δεν χρειάζεται το ίδιο πλάτος. Το 1,05fr/0,95fr δίνει στη δεξιά στήλη — τιμή και δέρματα — τον χώρο που ελευθερώθηκε. */ @media (min-width:880px){ .grid.two{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} } /* Σύνδεσμος ταυτότητας μέσα στη λίστα πεδίων: κρατά το βάρος της τιμής και δείχνει πατήσιμος μόνο στο πέρασμα (`R168`). */ dl.pairs dd a{color:var(--per, var(--brand)); text-decoration:none; border-bottom:1px dashed var(--line)} dl.pairs dd a:hover{border-bottom-color:currentColor} /* ── Η ΦΟΡΜΑ ΑΝΑΛΩΣΗΣ, ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ ΤΩΝ ΔΕΡΜΑΤΩΝ ─────────────────── Δική του απόφαση (`D-136`): η ανάλωση γράφεται εκεί που διαβάζεται, για να μην αλλάζει οθόνες. Δύο πεδία και ένα κουμπί σε **μία γραμμή** — είναι δουλειά 2,6 φορές τη μέρα, δεν χρειάζεται φόρμα σελίδας. Το πεδίο της παρτίδας είναι το φαρδύ γιατί εκεί **σκανάρει**· η ποσότητα είναι δύο-τρία ψηφία. */ .analosi-nea{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0 0 16px; padding:14px; border-radius:var(--r); background:var(--ground); border:1px solid var(--line); } /* ⚠️ `margin:0` ΚΑΙ ΔΕΝ ΕΙΝΑΙ ΠΕΡΙΤΤΟ — ΗΤΑΝ Η «ΣΤΡΑΒΗ ΓΡΑΜΜΗ» (`R309`). Ο Νικόλας, με φωτογραφία: *«το κουμπί που έχει πάνω που λέγεται καταχώρηση, είναι σε στραβή γραμμή»*. Είχε δίκιο, και ήταν μετρήσιμο: το κουμπί κάθεται **16 px χαμηλότερα** από τα πεδία. Η αιτία: ο γενικός κανόνας `form .pedio{margin-bottom:16px}` (0,1,1) δίνει περιθώριο που ο ειδικός `.analosi-nea .pedio` (0,2,0) δεν ακύρωνε — δεν όριζε καθόλου `margin`. Και με `align-items:flex-end` ευθυγραμμίζονται τα **περιθωριακά** κουτιά, όχι τα ορατά: το πεδίο τελείωνε 16 px πιο ψηλά από το κουμπί. */ .analosi-nea .pedio{display:flex; flex-direction:column; gap:4px; flex:1 1 180px; min-width:0; margin:0} /* ⚠️ 128px, ΟΧΙ 110 (`R304`). Στα 110 το πεδίο χωρούσε τρία ψηφία και τα βελάκια του Safari — μετά την αφαίρεσή τους, τα 128 δίνουν άνεση για «33,5» χωρίς να φαρδαίνει η φόρμα. */ .analosi-nea .pedio.steno{flex:0 0 128px} .analosi-nea label{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); } .analosi-nea input{ font:inherit; font-size:var(--fs-val); padding:9px 11px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); min-width:0; font-variant-numeric:tabular-nums; } .analosi-nea input:focus{outline:2px solid var(--per, var(--brand)); outline-offset:1px; border-color:var(--per, var(--brand))} .analosi-nea .btn{flex:0 0 auto} /* Κουμπί σβησίματος γραμμής (`R172`). Διακριτικό: είναι μη αναστρέψιμη ενέργεια, αλλά όχι η κύρια δουλειά της οθόνης — κοκκινίζει μόνο στο πέρασμα, ώστε να μην τραβά το μάτι σε κάθε γραμμή. */ /* ⭐ ΤΟ ΙΔΙΟ «✕» ΜΕ ΤΟ ΣΥΡΤΑΡΙ (`R309`). Δική του εντολή: *«στα δέρματα να μην λέει τη λέξη σβήσιμο, αλλά να έχει το χ, όπως έχει και το συρτάρι»*. Ίδιο μέγεθος, ίδιο πλαίσιο, ίδιο κοκκίνισμα με το `.svise-grammi` — μία εμφάνιση για μία ενέργεια. */ .svisimo{display:inline-flex} .btn-svisimo{ display:inline-grid; place-items:center; cursor:pointer; font:inherit; font-size:13px; line-height:1; width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink-4); } .btn-svisimo:hover{border-color:var(--warn); color:var(--warn-deep)} /* «για <πελάτη>» σε παραγγελία ή προσφορά: ο πελάτης υπάρχει, αλλά η γούνα ΔΕΝ πήγε εκεί. Η λεξούλα «για» κάνει τη διαφορά ορατή χωρίς λεζάντα. */ .gia{color:var(--ink-4); font-size:var(--fs-sm)} /* ── Η ΠΑΡΑΓΓΕΛΙΑ ΔΕΝ ΕΙΝΑΙ ΚΙΝΗΣΗ (`R175`, `D-139`) ────────────────────── Ο Νικόλας είδε μια παραγγελία στην καρτέλα της 34158 και τη διάβασε σαν αποστολή: *«βλέπω μια κίνηση στο τέλος που δεν υπήρχε πριν, από μια πελάτισσα»*. Μετά την εξήγηση: *«δείξε με έναν διαφορετικό τρόπο ότι ήταν παραγγελία για την τάδε πελάτισσα αλλά τελικά δεν την πήρε»*. Διάλεξε την επιλογή Β από τρεις: άμμο φόντο, χρωματιστή ραβδούλα, ετικέτα. Το φόντο το κάνει να ξεχωρίζει από τις αληθινές κινήσεις· η ραβδούλα λέει την κατάσταση από μακριά· η ετικέτα τη λέει με λέξεις. */ tr.paraggelia > td{background:var(--card-2)} tr.paraggelia > td:first-child{box-shadow:inset 3px 0 0 var(--ink-4)} tr.paraggelia.nai > td:first-child{box-shadow:inset 3px 0 0 var(--ok)} tr.paraggelia.oxi > td:first-child{box-shadow:inset 3px 0 0 var(--alarm)} tr.paraggelia.kratimeni > td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .etiketa{display:inline-block; font-size:var(--fs-lbl); font-weight:600; padding:1px 7px; border-radius:2px; white-space:nowrap; margin-left:6px} .etiketa.nai{background:var(--ok-wash); color:var(--ok-deep); border:1px solid var(--ok-line)} .etiketa.oxi{background:var(--alarm-wash); color:var(--alarm-deep); border:1px solid var(--alarm-line)} .etiketa.kratimeni{background:var(--warn-wash); color:var(--warn-deep); border:1px solid var(--warn-line)} /* ── ΤΟ ΟΝΟΜΑ ΑΝΘΡΩΠΟΥ ΜΕΣΑ ΣΕ ΚΙΝΗΣΗ (`R176`, `D-140`) ────────────────── Ξεχωρίζει από τον τόπο με το μωβ του — *«I think the Viber color is too much. We're gonna use it, but maybe less.»* Εδώ είναι ακριβώς το «λίγο»: μόνο ονόματα προσώπων, ώστε να διακρίνονται από αποθήκες με μια ματιά. */ a.prosopo{color:var(--accent-2); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor} a.prosopo:hover{color:var(--accent)} /* Η τιμή κάτω από την ποσότητα (`R179`). Μικρή και ήρεμη: η ποσότητα παραμένει το κύριο νούμερο, το χρήμα είναι η δεύτερη ανάγνωση. 13px — το κατώτατο που δέχεται ο Νικόλας σε οθόνη. */ .poso-grammis{display:block; font-size:var(--fs-lbl); color:var(--ink-3); font-weight:400; white-space:nowrap} /* ── Ο ΕΝΙΑΙΟΣ ΠΙΝΑΚΑΣ ΤΗΣ ΠΑΡΤΙΔΑΣ (`R188`) ──────────────────────────── Η γραμμή που υπάρχει μόνο στη γραμμένη κάρτα της γούνας ξεχωρίζει με άμμο φόντο: δεν είναι κίνηση αποθήκης, δεν μετράει στο υπόλοιπο. */ /* ⚠️ ΤΟ ΧΡΩΜΑ ΕΦΥΓΕ — ΔΙΚΗ ΤΟΥ ΑΠΟΦΑΣΗ (`R197`). *«Έχει χρώμα σε κάποιες γραμμές που είναι στην ίδια ημερομηνία. Προτιμώ να γράφω την ίδια ημερομηνία ξανά και ξανά, όπως γράφει στις γούνες, παρά να αλλάζει χρώμα το background.»* Το χρώμα δεν σήμαινε «ίδια ημερομηνία» — σήμαινε «από την κάρτα». Αλλά επειδή εκείνες οι γραμμές είχαν **κενό** κελί ημερομηνίας, το χρώμα φαινόταν να τις ομαδοποιεί. Τώρα η ημερομηνία γεμίζει από το δελτίο παραγωγής, και η ετικέτα «από την κάρτα» αρκεί μόνη της. */ a.goyna-syndesmos{color:var(--per, var(--brand)); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor} .ti{display:block; font-size:var(--fs-lbl); color:var(--ink-3); font-weight:400} /* ── «ΔΕΣ ΚΑΙ ΤΙΣ ΑΛΛΕΣ Ν ΚΙΝΗΣΕΙΣ» (`R211`) ─────────────────────────── Ο Νικόλας, για την καρτέλα προμηθευτή: *«συνεχίζει το κατεβατό με τα παραστατικά. Που είναι πολύ μεγάλο όλο αυτό.»* Οι πέντε τελευταίες κινήσεις απαντούν «πού είμαστε»· οι υπόλοιπες είναι ιστορικό. Ο μεγαλύτερος προμηθευτής έχει 102 — δέκα οθόνες. `
` και όχι JavaScript: δουλεύει παντού, τυπώνεται ανοιχτό, και δεν χρειάζεται τίποτα να φορτώσει. */ details{margin-top:14px; border-top:1px solid var(--line-soft); padding-top:4px} details > summary{ cursor:pointer; list-style:none; padding:9px 2px; font-size:var(--fs-sm); font-weight:600; color:var(--brand); } details > summary::-webkit-details-marker{display:none} /* Το βελάκι γυρίζει όταν ανοίγει — η μόνη ένδειξη ότι υπάρχει κι άλλο. */ details > summary::before{content:'▸ '; color:var(--ink-4); font-weight:400} details[open] > summary::before{content:'▾ '} details > summary:hover{color:var(--brand-2)} details > summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px} /* Ο δεύτερος πίνακας δεν έχει κεφαλίδα — οι στήλες είναι οι ίδιες και φαίνονται από πάνω. Μικρό περιθώριο για να μη «κολλά». */ details .scroll{margin-top:4px} /* ══════════════════════════════════════════════════════════════════════ ΤΟ ΣΥΡΤΑΡΙ, Η ΑΝΑΖΗΤΗΣΗ, ΚΑΙ ΤΟ BARCODE (`R213`) Δική του εντολή, 2026-11-02: *«να μπορεί να ανοίξει συρταρωτά στο πλάι … να μπορώ να κάνω κλικ εκτός του συρταριού και να κλείνει, για να μπορώ έτσι να βλέπω πολλά παραστατικά πατώντας τα»*. ══════════════════════════════════════════════════════════════════════ */ .fodra{ position:fixed; inset:0; background:rgba(28,25,22,.38); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:40; } .fodra.anoichto{opacity:1; pointer-events:auto} .syrtari{ /* ⚠️ ΦΑΡΔΥΤΕΡΟ — ΗΤΑΝ 560px ΚΑΙ ΣΤΕΝΕΥΕ (`R227`). Ο Νικόλας, σε συρτάρι πώλησης με 13 τεμάχια: *«το συρτάρι που ανοίγει στις πωλήσεις παραμένει μικρό … παραμένει πάρα πολύ **πιεσμένη** η πληροφορία. Και **δεν θέλω να πηγαίνει δεξιά-αριστερά** η πληροφορία.»* Οι περιγραφές γουνών είναι μακριές («Mink Male Beige Cross Jacket with Collar 1841/C» = 44 χαρακτήρες) και δίπλα τους χρειάζεται κωδικός και τιμή. Στα 560px δεν χωρούσαν. */ position:fixed; top:0; right:0; bottom:0; width:min(780px, 96vw); background:var(--card); border-left:1px solid var(--line); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1); z-index:41; display:flex; flex-direction:column; overflow:hidden; } .syrtari.anoichto{transform:translateX(0)} /* ⚠️ ΟΣΟ ΤΟ ΣΥΡΤΑΡΙ ΕΙΝΑΙ ΑΝΟΙΧΤΟ, Η ΣΕΛΙΔΑ ΑΠΟ ΠΙΣΩ ΔΕΝ ΚΥΛΑ. Η κλάση `me-syrtari` έμπαινε από το JavaScript αλλά δεν την χρησιμοποιούσε κανένας κανόνας — η ρόδα του ποντικιού κυλούσε τη λίστα από κάτω αντί για το περιεχόμενο του συρταριού. */ body.me-syrtari{overflow:hidden} /* Ο Νικόλας δουλεύει με το πληκτρολόγιο όσο και με το ποντίκι. */ @media (prefers-reduced-motion: reduce){ .fodra, .syrtari{transition:none} } .syrtari-fortosi{padding:24px 18px; color:var(--ink-3); font-size:var(--fs-sm)} .syrtari > header{ padding:15px 18px; border-bottom:1px solid var(--line); background:var(--card-2); display:flex; align-items:flex-start; gap:12px; } .syrtari > header .poios{flex:1; min-width:0} /* ⭐ Ο ΑΡΙΘΜΟΣ ΕΙΝΑΙ Ο ΣΥΝΔΕΣΜΟΣ (`R213`). *«να ανοίγει το μεγάλο παραστατικό όχι από το link που έχεις βάλει κάτω, αλλά όταν πατάω πάνω στον αριθμό του.»* Έχει δίκιο και είναι η συνέπεια του `R168` — «κάθε κωδικός είναι σύνδεσμος». Ο κωδικός στην κορυφή ήταν το μόνο σημείο όπου δεν ήταν. */ .syrtari > header .kod{ font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.25; } .syrtari > header .kod a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--line); } .syrtari > header .kod a:hover{color:var(--brand); border-bottom-color:currentColor} .syrtari > header .kod a:focus-visible{outline:2px solid var(--brand); outline-offset:3px} .syrtari > header .ti{font-size:var(--fs-sm); color:var(--ink-3); margin-top:3px} .syrtari button[data-kleise]{ font:inherit; background:none; border:1px solid var(--line); border-radius:4px; width:32px; height:32px; cursor:pointer; color:var(--ink-3); font-size:18px; line-height:1; flex:none; } .syrtari button[data-kleise]:hover{background:var(--ground); color:var(--ink)} .syrtari button[data-kleise]:focus-visible{outline:2px solid var(--brand); outline-offset:2px} .syrtari .soma{padding:16px 18px; overflow-y:auto; flex:1} .syrtari .soma > h3{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); } .syrtari .soma > h3:first-child{margin-top:0} .syrtari table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)} .syrtari table th{ text-align:left; font-weight:600; font-size:var(--fs-lbl); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); padding:0 10px 6px 0; border-bottom:1px solid var(--line); white-space:nowrap; } .syrtari table th.num, .syrtari table td.num{text-align:right} /* ⚠️ ΚΑΜΙΑ ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ ΜΕΣΑ ΣΤΟ ΣΥΡΤΑΡΙ (`R227`). *«Δεν θέλω να πηγαίνει δεξιά-αριστερά η πληροφορία.»* Ο γενικός κανόνας `tbody td{white-space:nowrap}` κρατά ίσο ύψος γραμμής στις μεγάλες λίστες — εκεί είναι σωστός. Στο συρτάρι όμως σπρώχνει τη μακριά περιγραφή έξω από την οθόνη, και μαζί της τον **κωδικό**. Εδώ τυλίγεται η περιγραφή· ο κωδικός και τα ποσά μένουν σε μία γραμμή, γιατί εκεί η αλλαγή γραμμής κάνει τον αριθμό δυσανάγνωστο. */ .syrtari table{table-layout:auto; width:100%} /* ⚠️ `break-word`, ΟΧΙ `anywhere` (`R231`). Ο Νικόλας: *«το “πού” … δεν είναι καλά γραμμένο»*. Το `overflow-wrap:anywhere` έκοβε τις λέξεις **στη μέση** όταν η στήλη στένευε — «ΚΕΝΤΡΙΚΑ ΕΔΡΑΣ» γινόταν KENT/ΡΙΚΑ/ΕΔΡΑ/Σ. Το `break-word` σπάει **μόνο** όταν μια λέξη δεν χωράει μόνη της, και προτιμά πάντα το κενό ανάμεσα στις λέξεις. */ .syrtari table td{padding:7px 10px 7px 0; border-bottom:1px solid var(--line-soft); white-space:normal; overflow-wrap:break-word} .syrtari table td.m, .syrtari table td.num, .syrtari table th.m, .syrtari table th.num{white-space:nowrap} .syrtari table th{white-space:normal} /* Η περιγραφή παίρνει ό,τι μείνει· οι άλλες στήλες όσο χρειάζονται. ⚠️⚠️ ΜΕ ΚΛΑΣΗ, ΟΧΙ ΜΕ ΘΕΣΗ — ΚΑΙ ΚΟΣΤΙΣΕ (`R281`). Εδώ έγραφε `td:nth-child(2)`, γραμμένο όταν δεύτερη στήλη ΗΤΑΝ η περιγραφή. Μόλις μπήκε η στήλη της αρίθμησης (`R278`), δεύτερος έγινε ο **κωδικός** και πήρε εκείνος το 100%: μετρημένο στο συρτάρι, ο κωδικός **567px** και η περιγραφή **90px**, σπασμένη σε πέντε γραμμές. Ο Νικόλας: *«στο συρτάρι έχεις χαλάσει όλη την περιγραφή, χειρότερα το έκανες»*. Είναι η ίδια οικογένεια με τα γραμμένα `colspan` (`R263`): επιλογέας που εξαρτάται από **θέση** σπάει σιωπηλά με την επόμενη στήλη. */ .syrtari table td.perigrafi{width:100%} .syrtari table tr:last-child td{border-bottom:0} /* ⚠️ Η ΕΤΙΚΕΤΑ ΔΙΠΛΑ ΣΤΗΝ ΤΙΜΗ, ΟΧΙ ΣΤΗΝ ΑΛΛΗ ΑΚΡΗ (`R229`). Ο Νικόλας, 2026-11-02, αφού φάρδυνε το συρτάρι στα 780px: *«είναι πλέον πάρα πολύ δυσανάγνωστα, **απέχει πάρα πολύ η αριστερή με τη δεξιά πληροφορία**, συγγνώμη δεν μπορώ να τα διαβάσω.»* Ο παλιός κανόνας είχε `grid-template-columns:auto 1fr` με την τιμή **στοιχισμένη δεξιά**. Στα 560px δούλευε· στα 780px άφηνε **πάνω από 400px κενό** ανάμεσα σε «Μοντέλο» και «1841/C», και το μάτι δεν έβρισκε ποια τιμή ανήκει σε ποια ετικέτα. Τώρα κάθε ζεύγος είναι **δικό του μπλοκ**: ετικέτα σταθερού πλάτους και η τιμή αμέσως δίπλα της. Τα μπλοκ μπαίνουν σε **δύο στήλες** όταν χωρούν, οπότε δεκαπέντε χαρακτηριστικά γίνονται οκτώ γραμμές αντί για δεκαπέντε. Κάτω από 700px πέφτουν σε μία στήλη μόνα τους. */ .syrtari dl.zevgi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:0 26px; margin:0; } .syrtari dl.zevgi > div{ display:flex; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft); min-width:0; } .syrtari dl.zevgi dt{ flex:0 0 116px; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.35; } .syrtari dl.zevgi dd{ margin:0; font-size:var(--fs); font-weight:500; text-align:left; min-width:0; overflow-wrap:anywhere; } /* ── Η ΤΑΙΝΙΑ ΤΟΥ ΦΑΝΤΑΣΜΑΤΟΣ (`R233`) ────────────────────────────── «Δεν υπάρχει πια — μεταποιήθηκε». Μπαίνει **πάνω** από τα χαρακτηριστικά, γιατί αλλιώς διαβάζει πρώτα «Διαθέσιμη». ⚠️ Το `--alarm-deep` και όχι το `--alarm`: ο τίτλος κάθεται πάνω στο `--alarm-wash`, όπου το απλό terra δίνει 3,88:1 — κάτω από το όριο. Μετρημένο στην παλέτα, γραμμή 118. */ .syrtari .fantasma-tainia{ margin:0 0 14px; padding:11px 13px; border-radius:var(--r); background:var(--alarm-wash); border:1px solid var(--alarm-line); } .syrtari .fantasma-tainia strong{ display:block; font-size:var(--fs); font-weight:600; color:var(--alarm-deep); } .syrtari .fantasma-tainia p{margin:3px 0 0; font-size:var(--fs-sm); color:var(--ink-2)} /* Ο σύνδεσμος κρατά το χρώμα του **τεμαχίου** (`R230`): δείχνει σε γούνα, και το χρώμα λέει σε τι δείχνει — όχι πόσο σοβαρό είναι. */ .syrtari .fantasma-tainia a{ font-weight:600; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--per-line); } .syrtari > footer{ padding:11px 18px; border-top:1px solid var(--line); background:var(--card-2); display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; } .syrtari > footer .plo{font-size:var(--fs-lbl); color:var(--ink-4)} /* ── ΤΟ ΣΧΟΛΙΟ ΤΟΥ ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΕΛΑ (`R235`) ──────────────────────── Δικό του χειρόγραφο κείμενο, συχνά με την ισοτιμία. Ξεχωρίζει από την περιγραφή με πλάγια και με το χρώμα του μελανιού 3 — είναι σημείωση, όχι δεδομένο του συστήματος. Κανένα χρώμα κατάστασης: δεν σημαίνει εντάξει ούτε πρόβλημα. */ .scholio{ margin-top:3px; font-size:var(--fs-sm); color:var(--ink-3); font-style:italic; overflow-wrap:break-word; } /* ── Η ΑΝΑΖΗΤΗΣΗ ΓΙΑ ΤΑ ΠΑΝΤΑ ──────────────────────────────────────── *«πολλές φορές δεν θυμάμαι τον αριθμό της παρτίδας»* — και δεν είναι μόνο οι παρτίδες. Σήμερα πρέπει να ξέρει σε ποια οθόνη ζει αυτό που ψάχνει· δουλειά του προγράμματος, όχι δική του. */ .pantou{ position:fixed; inset:0; background:rgba(28,25,22,.44); z-index:50; display:none; align-items:flex-start; justify-content:center; padding:11vh 20px 20px; } .pantou.anoichto{display:flex} .pantou-kouti{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); width:min(640px, 100%); max-height:72vh; display:flex; flex-direction:column; overflow:hidden; } .pantou-pedio{ font:inherit; font-size:18px; padding:15px 18px; border:0; border-bottom:1px solid var(--line); background:var(--card); color:var(--ink); width:100%; } .pantou-pedio:focus{outline:none} .pantou-apotelesmata{overflow-y:auto; flex:1} .pantou-apotelesmata .omada-ap{ font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:11px 18px 5px; background:var(--card-2); } .pantou-apotelesmata a{ display:flex; gap:12px; align-items:baseline; padding:9px 18px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-soft); } .pantou-apotelesmata a:hover, .pantou-apotelesmata a:focus{background:var(--brand-wash); outline:none} .pantou-apotelesmata a .kl{font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap} .pantou-apotelesmata a .per{color:var(--ink-2); font-size:var(--fs-sm); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pantou-apotelesmata .tipota{padding:18px; color:var(--ink-4); font-size:var(--fs-sm)} .pantou-ypo{ padding:9px 18px; border-top:1px solid var(--line); background:var(--card-2); font-size:var(--fs-lbl); color:var(--ink-4); } /* Το κουμπί της αναζήτησης στη ράγα. */ .psaxe{ display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; background:var(--card-2); border:1px solid var(--line); border-radius:4px; padding:7px 10px; color:var(--ink-3); margin-bottom:14px; } .psaxe:hover{background:var(--card); color:var(--ink)} .psaxe kbd{ /* ⚠️ ΠΟΤΕ ΚΑΤΩ ΑΠΟ 13px — το πιο συχνό του παράπονο σε οθόνη. Το έγραψα 11px και το έπιασε το `PaletaTest` την ίδια στιγμή. */ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-lbl); color:var(--ink-4); border:1px solid var(--line); border-radius:3px; padding:1px 6px; background:var(--ground); } /* ── Η ΑΛΥΣΙΔΑ ΤΗΣ ΙΧΝΗΛΑΣΙΜΟΤΗΤΑΣ (`R214`) ────────────────────────── Κανόνας 5 του έργου: *«η ιχνηλασιμότητα είναι ο λόγος ύπαρξης του συστήματος, όχι χαρακτηριστικό»*. Η αλυσίδα υπήρχε — αλλά έπρεπε να την περπατήσεις καρτέλα προς καρτέλα. 7.347 γούνες έχουν 5+ κινήσεις. */ /* ⚠️ `nav.alysida`, ΟΧΙ ΣΚΕΤΟ `.alysida` (`R223`). Ο Νικόλας, 2026-11-02: *«βλέπω ότι στα στάδια παραγωγής είναι χρωματισμένο πολύ πίσω. Αυτό το καφέ. Δεν καταλαβαίνω γιατί — είναι κάποιο λάθος;»* Ήταν. Η **ίδια κλάση** χρησιμοποιούνταν σε δύο πράγματα: τη λωρίδα ιχνηλασιμότητας στην κορυφή (`