/* ═══════════════════════════════════════════════════════════════════════════ Alija Group Intranet — design system Παλέτα μάρκας, από το alijagroup.gr: #554843 espresso — το μελάνι της μάρκας (χρώμα εικονιδίων στο site) #c9c2bc taupe — το λογότυπο· ΔΙΑΚΟΣΜΗΤΙΚΟ, ποτέ κείμενο (1,9:1 στο λευκό) #f6f0ec κρεμ — επιφάνειες Ουδέτερο περιβάλλον, ζεστό. Χρώμα σήματος ΜΟΝΟ για καταστάσεις. ═══════════════════════════════════════════════════════════════════════════ */ /* ΑΝΤΙΘΕΣΕΙΣ — ο κανόνας αυτού του έργου, μετά την ανατροφοδότηση 20/08/2026: το 4,5:1 του WCAG είναι το ΕΛΑΧΙΣΤΟ, όχι ο στόχος. Σε πυκνές οθόνες δεδομένων το δευτερεύον κείμενο στα 4,5:1 διαβάζεται ως ομίχλη. Εδώ: κείμενο σώματος ≥ 13:1 δευτερεύον ≥ 7:1 περιγράμματα ορατά, όχι σχεδόν-λευκά · καμία opacity κάτω από .8 σε κείμενο */ :root{ --ink:#241e1b; /* κείμενο σώματος — 16,0:1 στο λευκό */ --brand-ink:#4a3d38; /* espresso κελύφους, ένα σκαλί βαθύτερο — 9,7:1 */ --brand-pure:#554843; /* το ακριβές espresso του site — μεγάλες επιφάνειες μάρκας */ --brand:#c9c2bc; /* taupe — ΠΟΤΕ κείμενο· μόνο γεμίσματα & σήματα */ --bg:#ffffff; /* ΕΠΙΦΑΝΕΙΕΣ: πλαίσια, πλακίδια, κάρτες — ό,τι σηκώνεται */ --ground:#f1e9e3; /* ΕΔΑΦΟΣ: το φόντο της σελίδας, από όπου σηκώνονται οι επιφάνειες */ --panel:#f4ece7; /* κρεμ μάρκας, λίγο πιο παρών ώστε να ορίζεται η επιφάνεια */ --line:#d9cbc1; /* ορατό περίγραμμα — το προηγούμενο εξαφανιζόταν */ --hair:#e8ded6; /* λεπτός διαχωριστής μέσα σε πίνακες */ --mut:#5f524b; /* δευτερεύον κείμενο — 7,5:1 (ήταν 4,7:1) */ --accent:#4a3d38; --ok:#1d6b41; /* 6,3:1 */ --warn:#7d5510; /* 6,7:1 */ --alert:#a32b1f; /* 7,6:1 */ /* Sequential ramp (ένα hue, ανοιχτό→σκούρο) για μεγέθη σε γραφήματα. Χτισμένη στον άξονα taupe→espresso της μάρκας. Μονότονη ως προς τη φωτεινότητα — αυτό είναι το σωστό κριτήριο για sequential. Τα δύο ανοιχτότερα βήματα έχουν contrast < 3:1 στο λευκό, άρα κάθε μπάρα ΠΡΕΠΕΙ να φέρει ορατή ετικέτα· ποτέ μόνο χρώμα. */ --s1:#e2dbd5; --s2:#c9beb5; --s3:#ab9c91; --s4:#877669; --s5:#5c4d43; --r:10px; --r-sm:6px; --sh:0 1px 2px rgba(85,72,67,.06), 0 8px 24px rgba(85,72,67,.06); --sh-lg:0 2px 4px rgba(85,72,67,.07), 0 24px 56px rgba(85,72,67,.11); --nav-w:246px; --head-h:60px; --foot-h:34px; /* ── ΑΣΦΑΛΗΣ ΠΕΡΙΟΧΗ ΣΥΣΚΕΥΗΣ ───────────────────────────────────────────── Οι σελίδες δηλώνουν `viewport-fit=cover`, ώστε το χρώμα της μάρκας να φτάνει ως την άκρη της οθόνης. Αυτό όμως βάζει ΚΑΙ το περιεχόμενο κάτω από το Dynamic Island και τη γραμμή κατάστασης: μετρήθηκε σε iPhone ότι ο διακόπτης εταιρείας — το πρώτο πράγμα που πρέπει να διαβάσει ο χρήστης, γιατί ορίζει ΤΙ σημαίνει κάθε νούμερο της σελίδας — κρυβόταν πίσω από το νησί και δεν πατιόταν. Το `env()` επιστρέφει 0px σε κάθε συσκευή χωρίς εγκοπή, άρα η σταθερή διάταξη δεν αλλάζει πουθενά αλλού. Μπαίνει σε μεταβλητή για να μη σκορπίσουν δεκάδες calc() με env() μέσα τους. */ --sat:env(safe-area-inset-top,0px); /* Η εγκοπή είναι το ΕΛΑΧΙΣΤΟ, όχι άνετη απόσταση: με ακριβώς τόσο, τα κουμπιά ακουμπάνε στο Dynamic Island και μοιάζουν να μπαίνουν από κάτω του. Έξι pixel αέρα τα ξεκολλάνε — σε συσκευή χωρίς εγκοπή το --sat είναι 0 και μένουν μόνο τα έξι, που δεν χαλάνε τίποτα. */ --sat-pad:calc(env(safe-area-inset-top,0px) + 6px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px); --band-h:0px; /* ύψος μπάρας περιβάλλοντος — 0 όταν τρέχουμε σε πραγματικά δεδομένα */ /* Aeonik Pro = η γραμματοσειρά του alijagroup.gr. Εμπορική άδεια — αν την αγοράσει ο πελάτης, μπαίνει ως @font-face και δουλεύει αμέσως. Μέχρι τότε πέφτει στο επόμενο της στοίβας, οπτικά συγγενές geometric grotesque. */ --ff:"Aeonik Pro",Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--ff); font-size:14.5px; line-height:1.55; color:var(--ink); /* ══════════════════════════════════════════════════════════════════════ ΤΟ ΚΕΛΥΦΟΣ ΣΚΟΥΡΑΙΝΕΙ, ΤΑ ΔΕΔΟΜΕΝΑ ΦΩΤΙΖΟΝΤΑΙ (σχεδιασμός, 14/09/2026) Ήταν λευκό. Και ήταν λευκό ΚΑΙ το μενού, ΚΑΙ η κεφαλίδα, ΚΑΙ τα πλαίσια: τρεις επιφάνειες με το ίδιο χρώμα, χωρισμένες με γραμμές του ενός pixel. Το μόνο χρώμα της μάρκας σε ολόκληρη την οθόνη ήταν μια λωρίδα 24px στην κορυφή. Το αποτέλεσμα δεν ήταν άσχημο — ήταν ουδέτερο: η εφαρμογή δεν είχε σιλουέτα, και τα πλαίσια δεν διαβάζονταν ως αντικείμενα αλλά ως μία μεγάλη λίστα. Τώρα το έδαφος είναι κρεμ και οι επιφάνειες λευκές — σηκώνονται από πάνω του. Μαζί, το μενού και η κεφαλίδα πήραν το espresso και ενώθηκαν με τη λωρίδα εταιρείας και το υποσέλιδο: ένα συνεχόμενο σκούρο πλαίσιο γύρω από τη δουλειά. ΚΑΝΕΝΑ ΝΕΟ ΧΡΩΜΑ. Τα ίδια τρία της μάρκας, μοιρασμένα αλλιώς. ══════════════════════════════════════════════════════════════════════ */ background:var(--ground); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.017em;line-height:1.2} h1{font-size:26px} h2{font-size:19px} h3{font-size:15.5px} p{margin:0 0 12px} small{font-size:12px} table{border-collapse:collapse;width:100%} /* ΠΡΟΣΟΧΗ: κάθε inline SVG ΠΡΕΠΕΙ να έχει προεπιλεγμένο μέγεθος εδώ. Χωρίς αυτό, ένα χωρίς κανόνα CSS φουσκώνει στο προεπιλεγμένο 300x150 του browser και γεμίζει μισή ενότητα με γραμμικό σχέδιο. */ svg{ display:block;width:16px;height:16px;flex:0 0 auto; stroke:currentColor;stroke-width:1.8;fill:none; stroke-linecap:round;stroke-linejoin:round; } /* ── Λωρίδα κορυφής — η εταιρεία που βλέπεις ───────────────────────────────── Τέρμα πάνω, πάνω από τα πάντα, σε κάθε οθόνη. ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΜΕΣΑ ΣΤΗΝ ΚΕΦΑΛΙΔΑ: κάθε νούμερο του συστήματος εξαρτάται από την επιλεγμένη εταιρεία. Ένα σύνολο εσόδων διαβάζεται εντελώς αλλιώς αν δείχνει Alija αντί Enkeland — και ο μόνος τρόπος να μη γίνει αυτό το λάθος είναι η απάντηση να βρίσκεται στο πρώτο πράγμα που συναντά το μάτι, όχι χωμένη ανάμεσα σε λογότυπο και όνομα χρήστη. Καταλαμβάνει τη θέση όπου έστεκε η λωρίδα «ΕΙΚΟΝΙΚΑ ΔΕΔΟΜΕΝΑ». Εκείνη αφαιρέθηκε: το σύστημα διαβάζει πραγματικά δεδομένα από το SoftOne και μια λωρίδα που λέει το αντίθετο υπονομεύει ό,τι δείχνει η οθόνη. */ /* Το ύψος της λωρίδας ΠΕΡΙΛΑΜΒΑΝΕΙ την εγκοπή: όλα τα υπόλοιπα (κεφαλίδα, μενού, περιεχόμενο) κρέμονται από το --band-h και ακολουθούν μόνα τους. */ body{--band-h:calc(34px + var(--sat-pad))} .topbar{ position:fixed;top:0;left:0;right:0;z-index:60; height:calc(34px + var(--sat-pad)); padding:var(--sat-pad) calc(14px + var(--sar)) 0 calc(14px + var(--sal)); display:flex;align-items:center;justify-content:center;gap:10px; background:var(--brand-pure);color:#fff; } .topbar .lbl{ font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; opacity:.82;white-space:nowrap; } .topbar .spacer{flex:1} .topbar svg{width:13px;height:13px;stroke:currentColor} /* ── Διακόπτης εταιρείας ───────────────────────────────────────────────────── Δύο οντότητες, δύο βιβλία. Ο χρήστης πρέπει να ΞΕΡΕΙ ανά πάσα στιγμή ποια εταιρεία βλέπει — αλλιώς παίρνει αποφάσεις με λάθος αριθμούς. */ .entsw{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:#fff} .entsw button{ border:0;background:transparent;cursor:pointer;padding:6px 13px;font-size:12px;font-weight:640; color:var(--mut);white-space:nowrap;transition:background .13s,color .13s; } .entsw button + button{border-left:1px solid var(--line)} .entsw button:hover{background:var(--panel);color:var(--ink)} .entsw button.on{background:var(--brand-ink);color:#fff} .entsw button.on:hover{background:var(--brand-pure)} /* Πάνω στο espresso της λωρίδας: το ανενεργό κουμπί γίνεται ανοιχτό κρεμ πάνω σε σκούρο (11:1), το ενεργό αντιστρέφεται σε λευκό γέμισμα με espresso γράμμα (10,4:1). Και τα δύο περνούν άνετα το AAA — το «λευκό με opacity» που θα ήταν ο εύκολος δρόμος πέφτει κάτω από 4:1 και διαβάζεται ως απενεργοποιημένο. */ .topbar .entsw{border-color:rgba(255,255,255,.42);background:transparent} .topbar .entsw button{color:#f2eae4;padding:4px 13px} .topbar .entsw button + button{border-left-color:rgba(255,255,255,.42)} .topbar .entsw button:hover{background:rgba(255,255,255,.16);color:#fff} .topbar .entsw button.on{background:#fff;color:var(--brand-pure);font-weight:750} .topbar .entsw button.on:hover{background:#fff;color:var(--brand-pure)} /* Σήμα πηγής δεδομένων στην κεφαλίδα */ .srcchip{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px; font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; border:1.5px solid currentColor;white-space:nowrap; } .srcchip.live{color:var(--ok)} .srcchip.demo{color:var(--warn)} .srcchip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto} /* ── Header ──────────────────────────────────────────────────────────────── */ .head{ position:fixed;top:var(--band-h);left:0;right:0;height:var(--head-h);z-index:50; /* Συνεχόμενη με τη λωρίδα εταιρείας από πάνω: μία επιφάνεια, όχι δύο. Έφυγε το blur — δεν υπάρχει τίποτα να φανεί από κάτω όταν το χρώμα είναι αδιαφανές, και το backdrop-filter κοστίζει σε κάθε κύλιση. */ background:var(--brand-pure); border-bottom:1px solid rgba(255,255,255,.13); display:flex;align-items:center;gap:16px; padding:0 calc(20px + var(--sar)) 0 calc(20px + var(--sal)); } .head .brand{display:flex;align-items:center;gap:11px;min-width:0} /* Το λογότυπο είναι μονόχρωμο μαύρο. Σε espresso φόντο θα χανόταν· το `brightness(0) invert(1)` το κάνει καθαρό λευκό χωρίς δεύτερο αρχείο — δουλεύει ακριβώς επειδή το σήμα ΔΕΝ έχει δεύτερο χρώμα. */ .head .brand img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)} .head .brand .wordmark{ font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; color:#fff; } .head .brand .wordmark span{font-weight:400;opacity:.8} .head .spacer{flex:1} .head .hitem{ display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.74);white-space:nowrap; } .head .hitem b{color:#fff;font-weight:640} .burger{ display:none;width:36px;height:36px;border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.12); border-radius:var(--r-sm);align-items:center;justify-content:center;cursor:pointer; } .burger svg{stroke:#fff} /* Chip χρήστη */ .userchip{ display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px; border:1px solid rgba(255,255,255,.24);border-radius:100px; background:rgba(255,255,255,.11);cursor:pointer; transition:border-color .15s, background .15s; } .userchip:hover{border-color:#fff;background:rgba(255,255,255,.18)} /* Το μονόγραμμα αντιστρέφεται: λευκός δίσκος με espresso γράμμα. Σε σκούρα κεφαλίδα, ένας σκούρος δίσκος πάνω σε σκούρο φόντο δεν είναι πρόσωπο. */ .userchip .av{ width:28px;height:28px;border-radius:50%;background:#fff;color:var(--brand-pure); display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:0 0 auto; } .userchip .who{line-height:1.15;text-align:left;padding-right:6px} .userchip .who b{display:block;font-size:12.5px;font-weight:640;color:#fff} .userchip .who small{display:block;color:rgba(255,255,255,.70);font-size:10.5px} /* ── Βάρδια στην κεφαλίδα ────────────────────────────────────────────────── Δίπλα στο chip του χρήστη, με το ίδιο σχήμα: δύο πλακίδια που μοιάζουν ανήκουν στον ίδιο άνθρωπο — «εγώ» και «η μέρα μου». Το κουμπί είναι ΜΕΣΑ στο πλακίδιο και όχι ολόκληρο το πλακίδιο κουμπί: η κατάσταση διαβάζεται, το κουμπί πατιέται, και μια βάρδια δεν πρέπει να ανοίγει από αδέξιο πάτημα πάνω στο ρολόι. */ .shchip{ display:flex;align-items:center;gap:9px;padding:4px 4px 4px 12px; border:1px solid rgba(255,255,255,.24);border-radius:100px; background:rgba(255,255,255,.11);color:#fff;flex:0 0 auto; } /* Σε εξέλιξη: πράσινο σήμα, όπως η κάρτα στην «Η μέρα μου». Το χρώμα δεν είναι η μόνη διαφορά — αλλάζει και η λέξη του κουμπιού (Έναρξη/Λήξη), γιατί κατάσταση που φαίνεται μόνο από το χρώμα δεν φαίνεται σε όλους. */ .shchip.on{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.2)} .shchip .sh-st{display:flex;align-items:center;gap:7px;white-space:nowrap} .shchip .sh-st i{ width:7px;height:7px;border-radius:50%;flex:0 0 auto; background:rgba(255,255,255,.45); } .shchip.on .sh-st i{background:#51d08a;box-shadow:0 0 0 3px rgba(81,208,138,.25)} .shchip .sh-st b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums} .shchip button{ border:0;border-radius:100px;cursor:pointer;font-family:inherit; padding:6px 13px;font-size:12px;font-weight:750; background:#fff;color:var(--brand-pure); } .shchip button:hover{background:var(--panel)} /* Η ΛΗΞΗ ΞΕΧΩΡΙΖΕΙ ΜΕ ΤΟ ΓΡΑΜΜΑ, ΟΧΙ ΜΕ ΣΚΟΥΡΟ ΦΟΝΤΟ: πράσινο πλακίδιο πάνω σε espresso κεφαλίδα βγαίνει αχνό. Λευκό πλακίδιο με πράσινο γράμμα κρατά και την ένδειξη «τρέχει» και την αναγνωσιμότητα. */ .shchip.on button{color:var(--ok)} /* ── Λήξη βάρδιας: το παράθυρο της μοιρασιάς ─────────────────────────────── Ζούσε μέσα στη myday.html όσο το παράθυρο άνοιγε μόνο από εκεί. Από 11/11/2026 ανοίγει ΚΑΙ από την κεφαλίδα, δηλαδή από κάθε σελίδα — και στυλ που ζει σε μία σελίδα θα άφηνε το ίδιο παράθυρο άβαφο σε όλες τις άλλες. */ .hrpick{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px} .hrpick button{ flex:1;min-width:52px;min-height:54px;border-radius:14px;cursor:pointer; border:2px solid var(--line);background:var(--bg);font-family:inherit; font-size:17px;font-weight:750;color:var(--ink); } .hrpick button.on{border-color:var(--brand-ink);background:var(--brand-ink);color:#fff} .hrpick button small{display:block;font-size:10px;font-weight:600;opacity:.7;margin-top:1px} .hrtot{ display:flex;align-items:baseline;gap:9px;padding:12px 14px;border-radius:var(--r); background:var(--panel);border:1px solid var(--line);margin:10px 0 14px; } .hrtot b{font-size:24px;font-weight:800;color:var(--brand-ink);font-variant-numeric:tabular-nums} .hrtot span{font-size:12.5px;color:var(--mut);line-height:1.5} .arow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair)} .arow:last-child{border-bottom:none} .arow span{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35} .arow span small{color:var(--mut);font-weight:400} .arow .ah{flex:0 0 92px;min-height:46px;text-align:center;font-size:16px} .asum{margin-top:14px;padding-top:12px;border-top:1px solid var(--line); font-size:13.5px;color:var(--mut)} .asum b{color:var(--ink);font-variant-numeric:tabular-nums} /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .nav{ position:fixed;top:calc(var(--band-h) + var(--head-h));bottom:calc(var(--foot-h) + var(--sab));left:0;width:var(--nav-w);z-index:40; background:var(--brand-pure);border-right:1px solid rgba(0,0,0,.14); padding:16px 12px 20px;overflow-y:auto; } .nav .grp{ font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55); padding:16px 10px 7px;font-weight:640; } .nav .grp:first-child{padding-top:2px} .nav a{ display:flex;align-items:center;gap:11px;padding:8.5px 10px;border-radius:var(--r-sm); font-size:13.5px;color:rgba(255,255,255,.86);margin-bottom:1px;transition:background .13s; } .nav a:hover{background:rgba(255,255,255,.10)} /* ΑΝΤΙΣΤΡΟΦΗ ΤΟΥ ΕΝΕΡΓΟΥ: ήταν σκούρο γέμισμα σε λευκό μενού, τώρα λευκό σε σκούρο. Η αρχή είναι η ίδια — η σελίδα όπου βρίσκεσαι είναι η μόνη που σπάει το μοτίβο — απλώς το μοτίβο άλλαξε πλευρά. */ .nav a.on{background:#fff;color:var(--brand-pure);font-weight:700} .nav a.on svg{stroke:var(--brand-pure)} .nav a svg{width:16px;height:16px;stroke:rgba(255,255,255,.62);stroke-width:1.7;fill:none;flex:0 0 auto} .nav a.on .cnt,.nav a .cnt{ margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:100px; background:var(--alert);color:#fff; } .nav a.dim{opacity:.8} /* Σε σκούρο φόντο, η ώχρα του --warn (6,7:1 στο λευκό) γίνεται 2,4:1 και σβήνει. Ανοίγει μέχρι να ξαναδιαβάζεται — ίδια σημασία, άλλο έδαφος. */ .nav .lock{margin-left:auto;font-size:9px;letter-spacing:.07em;color:#e8bd6a; border:1px solid #e8bd6a;border-radius:3px;padding:0 4px;font-weight:700} .nav .lock.soon{color:rgba(255,255,255,.58);border-color:rgba(255,255,255,.30)} /* Ενότητες δύο επιπέδων — ίδιο μοτίβο με το intranet.connectoras.gr. Η ενότητα όπου βρίσκεσαι ανοίγει μόνη της· τις άλλες τις ανοίγεις εσύ και η επιλογή θυμάται. Χωρίς αυτό, κάθε φόρτωση σελίδας ξανακλείνει ό,τι άνοιξες. */ .nav-grp{margin-bottom:1px} .nav-grp-h{ display:flex;align-items:center;gap:11px;width:100%;padding:8.5px 10px; border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer; font-size:13.5px;font-weight:600;color:rgba(255,255,255,.86);text-align:left; transition:background .13s; } .nav-grp-h:hover{background:rgba(255,255,255,.10)} .nav-grp-h svg{width:16px;height:16px;stroke:rgba(255,255,255,.62);stroke-width:1.7;flex:0 0 auto} .nav-grp-h span{flex:1;min-width:0} /* Η ενότητα στην οποία βρίσκεσαι: taupe περίγραμμα αριστερά, όχι γεμάτο φόντο — το γεμάτο ανήκει στη ΣΕΛΙΔΑ, αλλιώς δύο πράγματα διεκδικούν την ίδια έμφαση. */ .nav-grp-h.in{color:#fff;background:rgba(255,255,255,.11)} .nav-grp-h.in svg{stroke:#fff} .nav-grp-h .car{margin-left:auto;transition:transform .18s;stroke:rgba(255,255,255,.62)} .nav-grp.open .nav-grp-h .car{transform:rotate(180deg)} .nav-sub{display:none;margin:2px 0 6px;padding-left:11px;border-left:2px solid rgba(255,255,255,.22)} .nav-grp.open .nav-sub{display:block} .nav-sub a{padding:7px 10px;font-size:13px} .nav-sub a.on{background:#fff;color:var(--brand-pure);font-weight:700} /* ── Σταθερό υποσέλιδο ───────────────────────────────────────────────────── */ /* Σταθερό όπως η κεφαλίδα. Εδώ ζουν μόνιμα: επωνυμία, έκδοση εφαρμογής, έκδοση πλατφόρμας Connectoras, κατάσταση άδειας, υπόλοιπο AI credits, εγκατάσταση PWA. Δεν κυλά με τη σελίδα — είναι όργανα, όχι περιεχόμενο. */ .footbar{ position:fixed;left:0;right:0;bottom:0;z-index:45; /* IOS: TO SIMEIO POU TO EKANE NA KOLLAEI STI MESI TIS SELIDAS Otan o christis kylaei PROS TA PANO, i Safari epanatopothetei ta stathera stoicheia se kathe kare -- kai gia liga kare ta zografizei se lathos thesi, mesa sto periechomeno. To bottom:0 einai sosto: to lathos einai sti zografiki, ochi sti diataxi. I lysi einai na apoktisei DIKO tou epipedo synthesis, opote i Safari to metakinei anti na to xanazografizei. */ transform:translateZ(0); will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; height:calc(var(--foot-h) + var(--sab)); background:var(--brand-ink);color:#fff; display:flex;align-items:center;gap:14px; padding:0 calc(18px + var(--sar)) var(--sab) calc(18px + var(--sal)); font-size:11.5px;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; } .footbar .fb-brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.02em} .footbar .fb-brand img{height:14px;width:auto;display:block} .footbar .spacer{flex:1;min-width:8px} .footbar .fb{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.86)} .footbar .fb b{color:#fff;font-weight:640;font-variant-numeric:tabular-nums} .footbar .sep{width:1px;height:14px;background:rgba(255,255,255,.22);flex:0 0 auto} .footbar svg{width:13px;height:13px;stroke:var(--brand)} /* Σήμα κατάστασης άδειας — τρεις καταστάσεις, ξεκάθαρες με μία ματιά */ .footbar .lic{ display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:100px; border:1px solid currentColor; } .footbar .lic.on{color:#8fd6ac} .footbar .lic.grace{color:#e8c069} .footbar .lic.off{color:#f0a49a} .footbar .lic::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .footbar .fb-act{ display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px; border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;background:transparent; font-size:11px;font-weight:600;transition:background .14s, border-color .14s; } .footbar .fb-act:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)} /* ── Main ────────────────────────────────────────────────────────────────── */ .main{ margin-left:var(--nav-w); padding:calc(var(--band-h) + var(--head-h) + 28px) 28px calc(var(--foot-h) + var(--sab) + 32px); max-width:1480px; } .page-head{margin-bottom:24px} .page-head .eyebrow{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut); font-weight:640;margin-bottom:7px; } .page-head .sub{color:var(--mut);font-size:13.5px;margin-top:6px;max-width:74ch} /* ΚΟΥΜΠΙ «ΠΙΣΩ» (εντολή πελάτη 11/11/2026). Σε εγκατεστημένο PWA δεν υπάρχει μπάρα browser, άρα ούτε βελάκι — και στο iPhone σε standalone δεν δουλεύει ούτε η χειρονομία από την άκρη. Χωρίς αυτό, ο μόνος δρόμος πίσω είναι το πλαϊνό μενού, που πάει στη ΛΙΣΤΑ και όχι εκεί που ήσουν. Στόχος αφής 40px: μπαίνει σε κάθε σελίδα, δηλαδή και σε όσες ανοίγουν με γάντια στο εργοτάξιο. */ .backb{ display:inline-flex;align-items:center;gap:6px;margin-bottom:10px; min-height:40px;padding:0 13px 0 9px;border:1px solid var(--line); border-radius:999px;background:var(--bg);color:var(--mut); font-size:12.5px;font-weight:700;cursor:pointer; } .backb svg{width:16px;height:16px} .backb:hover{border-color:var(--brand-ink);color:var(--brand-ink)} .backb:active{background:var(--panel)} /* ── Badges scope ────────────────────────────────────────────────────────── */ .badge{ display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;padding:2.5px 8px;border-radius:100px; border:1.5px solid;white-space:nowrap;vertical-align:middle;cursor:help; } .badge.v1{color:var(--ok);border-color:var(--ok)} .badge.next{color:var(--warn);border-color:var(--warn)} .badge.dot::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .tag{ display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600; padding:2px 8px;border-radius:100px;background:var(--panel);color:var(--mut);white-space:nowrap; } .tag.ok{background:rgba(31,138,76,.10);color:var(--ok)} .tag.warn{background:rgba(184,134,11,.12);color:var(--warn)} .tag.alert{background:rgba(192,57,43,.10);color:var(--alert)} .tag.ink{background:var(--brand-ink);color:#fff} /* ── KPI cards ───────────────────────────────────────────────────────────── */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-bottom:26px} .kpi{ border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;background:var(--bg); transition:border-color .15s, box-shadow .15s, transform .15s;position:relative;overflow:hidden; } /* Λωρίδα μάρκας στην κορυφή κάθε πλακιδίου. Ένα στοιχείο, και η σειρά των KPI σταματά να μοιάζει με άδεια κουτιά — αυτό ήταν το «ξεψυχισμένο». */ .kpi::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand); } /* Το πλακίδιο μπορεί να είναι και σύνδεσμος: ένα νούμερο που προειδοποιεί πρέπει να οδηγεί στα ονόματα πίσω του. Ως θέλει ρητό display — αλλιώς μένει inline και το padding του δεν σπρώχνει τίποτα. */ a.kpi{display:block} .kpi.link{cursor:pointer} .kpi.link:hover{border-color:var(--brand-ink);box-shadow:var(--sh);transform:translateY(-1px)} .kpi.link:hover::before{background:var(--brand-ink)} .kpi .lab{ font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut); font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:7px;min-height:16px; } /* Ένα σκαλί μεγαλύτερα (33→38). Είναι η πρώτη πληροφορία της ημέρας και είχε σχεδόν το ίδιο βάρος με έναν τίτλο πίνακα· τώρα διαβάζεται από απόσταση. */ .kpi .val{font-size:38px;font-weight:720;letter-spacing:-.034em;line-height:1.02;color:var(--ink)} .kpi .val.sm{font-size:27px} .kpi .hint{font-size:11.5px;color:var(--mut);margin-top:7px;line-height:1.4} .kpi.alert::before{background:var(--alert)} .kpi.alert .val{color:var(--alert)} .kpi.ok::before{background:var(--ok)} .kpi.ok .val{color:var(--ok)} .kpi.warn{background:var(--panel)} .kpi.warn::before{background:var(--warn)} .kpi.warn .val{color:var(--warn);font-size:15px;font-weight:700;letter-spacing:0;line-height:1.35} /* Το «ήρωας» πλακίδιο: ένα ανά οθόνη, για το νούμερο που μετράει πραγματικά. Γεμάτο espresso — δίνει το σημείο εστίασης που έλειπε από τη σειρά. */ /* ΤΟ ΠΡΩΤΟ ΠΛΑΚΙΔΙΟ ΔΕΝ ΕΙΝΑΙ ΠΙΑ ΣΚΟΥΡΟ ΚΟΥΤΙ. Ήταν γεμάτο espresso, και σωστά όσο η οθόνη ήταν λευκή: ήταν το μοναδικό σκούρο σχήμα, άρα το πρώτο που έβλεπες. Με σκούρο μενού δίπλα του, δύο σκούρες μάζες διεκδικούν το ίδιο βλέμμα και καμία δεν κερδίζει. Η έμφαση μένει — μετακινείται από το γέμισμα στη λωρίδα και στον αριθμό. */ .kpi.fill{border-color:var(--brand-ink)} .kpi.fill::before{background:var(--brand-pure);height:4px} .kpi.fill .lab{color:var(--brand-ink)} .kpi.fill .val{color:var(--brand-ink)} .kpi.fill.link:hover{box-shadow:var(--sh-lg)} /* ── Panels & tables ─────────────────────────────────────────────────────── */ .panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);margin-bottom:22px;overflow:hidden} .panel > .ph{ display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line); flex-wrap:wrap; } .panel > .ph h3{flex:0 0 auto} .panel > .ph .spacer{flex:1} .panel > .pb{padding:18px} .panel > .pb.flush{padding:0} .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table.tbl{font-size:13px;min-width:640px} table.tbl th{ text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut); font-weight:640;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg); } table.tbl td{padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:middle} table.tbl tr:last-child td{border-bottom:none} table.tbl tbody tr{transition:background .12s} table.tbl tbody tr:hover{background:var(--panel)} table.tbl tr.clickable{cursor:pointer} table.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.tbl .strong{font-weight:640} .muted{color:var(--mut)} .mono{font-variant-numeric:tabular-nums} /* ── Progress ────────────────────────────────────────────────────────────── */ .bar{height:6px;border-radius:100px;background:var(--hair);overflow:hidden;min-width:80px} .bar > i{display:block;height:100%;background:var(--brand-ink);border-radius:100px;transition:width .4s} .bar.ok > i{background:var(--ok)} .bar.warn > i{background:var(--warn)} .bar.alert > i{background:var(--alert)} .barlab{display:flex;align-items:center;gap:9px} .barlab .pct{font-size:11.5px;font-weight:640;min-width:34px;text-align:right;font-variant-numeric:tabular-nums} /* Στοίβα οικονομικών: τιμολογημένο / εισπραγμένο επί δηλωμένης */ .fin{display:flex;height:7px;border-radius:100px;overflow:hidden;background:var(--line);min-width:120px} .fin i{display:block;height:100%} .fin .inv{background:var(--s3)} .fin .col{background:var(--ok)} /* ── Stage pills ─────────────────────────────────────────────────────────── */ .stages{display:flex;flex-wrap:wrap;gap:6px} /* ΤΟ `.stage` ΕΦΥΓΕ — ΗΤΑΝ ΝΕΚΡΟΣ ΚΑΝΟΝΑΣ ΠΟΥ ΕΣΠΑΓΕ ΖΩΝΤΑΝΗ ΣΕΛΙΔΑ. Ήταν ένα πλακίδιο σταδίου (μικρό, στρογγυλό, `white-space:nowrap`). Κανείς δεν το χρησιμοποιούσε πια: ο πίνακας σταδίων του έργου γράφει `.stg`, και καμία άλλη οθόνη δεν έβγαζε `class="stage"` — εκτός από ΜΙΑ, κατά λάθος. Η καρτέλα υποψηφίου σημαδεύει τις αλλαγές σταδίου στο χρονολόγιο ως `
`. Ίδιο όνομα, εντελώς άλλο πράγμα: μια γραμμή πλήρους πλάτους με κείμενο που ΠΡΕΠΕΙ να σπάει. Κληρονομούσε το nowrap του πλακιδίου, οπότε το ελάχιστο πλάτος της γινόταν όσο ολόκληρη η πρόταση — 382px. Το κελί του πλέγματος δεν μαζεύει κάτω από το περιεχόμενό του, και η σελίδα φάρδαινε στα 450px σε οθόνη 390: η καρτέλα που ανοίγεις για να τηλεφωνήσεις ήταν κομμένη δεξιά, με κύλιση στο πλάι. Δεν μετονομάστηκε η κλάση της καρτέλας: το λάθος δεν ήταν εκεί. Ένα όνομα τόσο γενικό όσο το «stage» σε καθολικό φύλλο ύφους είναι νάρκη — και αυτή είχε ήδη σκάσει μία φορά χωρίς να το πάρει κανείς είδηση. */ /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:8px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg); font-size:13px;font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap; } .btn:hover{border-color:var(--ink);background:var(--panel)} .btn.pri{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff} .btn.pri:hover{opacity:.85;background:var(--ink)} .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn.ok:hover{opacity:.88;background:var(--ok)} .btn.sm{padding:5px 11px;font-size:12px} .btn.lg{padding:12px 22px;font-size:14.5px} .btn.block{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed} .btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none} .field{margin-bottom:14px} .field label{display:block;font-size:12px;font-weight:640;margin-bottom:5px} .inp{ width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--bg);outline:none;transition:border-color .14s, box-shadow .14s;font-size:13.5px; } .inp:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(85,72,67,.07)} select.inp{cursor:pointer} /* ── Ειδοποίηση scope (χρησιμοποιείται στις σελίδες ΕΞΕΛΙΞΗΣ) ───────────── */ .notice{ border:1.5px dashed var(--warn);background:rgba(184,134,11,.05);border-radius:var(--r); padding:17px 20px;margin-bottom:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap; } .notice .tx{flex:1;min-width:260px} .notice h3{font-size:15px;margin-bottom:5px} .notice p{margin:0;font-size:13px;color:var(--mut);line-height:1.6} .notice > svg{width:19px;height:19px;stroke:var(--warn);stroke-width:1.9} /* ── ΕΞΕΛΙΞΗ placeholder ─────────────────────────────────────────────────── */ .evo{ border:1.5px dashed var(--warn);border-radius:var(--r);padding:20px;background:rgba(184,134,11,.035); position:relative; } .evo h3{margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .evo p{color:var(--mut);font-size:13px;margin-bottom:0} .evo .hook{ margin-top:13px;padding-top:13px;border-top:1px dashed rgba(184,134,11,.4); font-size:12.5px;color:var(--warn);font-weight:600; } .evo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px} /* ── Γραφήματα ───────────────────────────────────────────────────────────── */ /* Οριζόντιες μπάρες. Κάθε μπάρα φέρει ΠΑΝΤΑ ετικέτα + αριθμό (direct label) — η ανοιχτή άκρη της ράμπας δεν σηκώνει νόημα μόνη της. */ .hbars{display:flex;flex-direction:column;gap:11px} .hb{display:grid;grid-template-columns:112px 1fr auto;gap:13px;align-items:center;cursor:pointer} .hb:hover .hb-t{opacity:1} .hb-l{font-size:12.5px;color:var(--mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hb-t{height:22px;background:var(--panel);border-radius:4px;overflow:hidden;opacity:.92;transition:opacity .14s} .hb-t > i{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .5s cubic-bezier(.22,1,.36,1)} .hb-v{font-size:14px;font-weight:700;min-width:30px;text-align:right;font-variant-numeric:tabular-nums} /* Στοίβα οικονομικής ροής — 2px κενό επιφάνειας ανάμεσα στα τμήματα */ .flowbar{display:flex;height:34px;border-radius:6px;overflow:hidden;background:var(--panel);gap:2px} .flowbar i{display:block;height:100%;position:relative;transition:width .5s cubic-bezier(.22,1,.36,1)} .flowlegend{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px} .flowlegend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut)} .flowlegend span::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--k);flex:0 0 auto} .flowlegend b{color:var(--ink);font-variant-numeric:tabular-nums} /* Κατάσταση έργου — χρώμα ΚΑΙ λέξη, ποτέ μόνο χρώμα (πράσινο↔χρυσό ΔΕ 6.2 σε πρωτανοπία) */ .health{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:640;white-space:nowrap} .health::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto} .health.ok{color:var(--ok)} .health.warn{color:var(--warn)} .health.bad{color:var(--alert)} /* Σύνοψη σε λόγια */ .saidout{ display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:0; border:1px solid var(--line);border-radius:var(--r);overflow:hidden; } .saidout > div{padding:17px 19px;border-right:1px solid var(--line)} .saidout > div:last-child{border-right:none} .saidout .n{font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums} .saidout .t{font-size:13px;margin-top:7px;line-height:1.5;color:var(--mut)} .saidout .t b{color:var(--ink);font-weight:640} @media(max-width:860px){ .saidout > div{border-right:none;border-bottom:1px solid var(--line)} } /* ── Notifications ───────────────────────────────────────────────────────── */ .notif{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start} .notif:last-child{border-bottom:none} .notif .ic{ width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:var(--panel); } .notif .ic svg{width:15px;height:15px;stroke:var(--mut);stroke-width:1.8;fill:none} .notif.unread .ic{background:var(--ink)} .notif.unread .ic svg{stroke:#fff} .notif .bd{flex:1;min-width:0} .notif .bd .msg{font-size:13px;line-height:1.45} .notif.unread .bd .msg{font-weight:600} .notif .bd .when{font-size:11px;color:var(--mut);margin-top:3px} /* ══════════════════════════════════════════════════════════════════════════ Η ΚΛΙΜΑΚΑ ΤΩΝ ΕΠΙΠΕΔΩΝ — ΓΡΑΜΜΕΝΗ, ΓΙΑΤΙ ΑΛΛΙΩΣ ΤΗΝ ΜΑΝΤΕΥΕΙ Ο ΕΠΟΜΕΝΟΣ Αίτημα 24/09/2026: «στο μητρώο έργων, ενέργειες → αν πάω να βάλω πελάτη, η επιλογή πελάτη εμφανίζεται ΠΙΣΩ από το παράθυρο ενεργειών». Η αιτία: η κάρτα έργου (`prjcard.js`, επικάλυψη που ζει πάνω σε κάθε σελίδα) είχε δώσει στον εαυτό της 200, ενώ το ΚΟΙΝΟ παράθυρο είχε 100 — και το κοινό παράθυρο είναι αυτό που καλεί η ίδια η κάρτα. Το παιδί κάτω από τον γονιό. Ίδια οικογένεια με τη σύγκρουση της κλάσης `.nav`: widget που κάθεται πάνω σε κάθε σελίδα και δεν λογαριάζει τα κοινά έπιπλα. 40 πλαϊνό μενού 60 μπάντα 50 κεφαλίδα 120 βοήθημα «?» 140 γραμμή ενεργειών 150 κάτω μπάρα 200 επικαλύψεις σελίδας/widget (κάρτα έργου, offer) 300 ΤΟ ΚΟΙΝΟ ΠΑΡΑΘΥΡΟ — πάνω από ΟΛΑ όσα μπορούν να το καλέσουν 400 ειδοποίηση (toast) — πάνω και από το παράθυρο ΚΑΝΟΝΑΣ: ό,τι ΚΑΛΕΙ το παράθυρο πρέπει να είναι ΚΑΤΩ από αυτό. Νέα επικάλυψη παίρνει 200, ποτέ παραπάνω. ══════════════════════════════════════════════════════════════════════════ */ /* ── Modal ───────────────────────────────────────────────────────────────── */ .ovl{ position:fixed;inset:0;background:rgba(85,72,67,.42);backdrop-filter:blur(3px); z-index:300;display:none;align-items:center;justify-content:center; /* Το padding σέβεται την εγκοπή: χωρίς αυτό, σε iPhone η κορυφή του παραθύρου κάθεται κάτω από το Dynamic Island. */ padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab)); /* Η κύλιση δεν διαρρέει στη σελίδα από κάτω. Χωρίς αυτό, φτάνοντας στο τέλος του παραθύρου συνεχίζει να κυλά το φόντο και το παράθυρο «φεύγει». */ overscroll-behavior:contain; } .ovl.open{display:flex} .modal{ background:var(--bg);border-radius:14px;box-shadow:var(--sh-lg);width:100%;max-width:520px; /* ΤΟ 88vh ΗΤΑΝ ΤΟ ΛΑΘΟΣ ΣΤΟ ΚΙΝΗΤΟ. Το vh μετράει το παράθυρο ΜΕ τη γραμμή διεύθυνσης· όταν εκείνη μαζεύεται στην κύλιση, το ύψος αλλάζει και το παράθυρο πηδά. Το dvh μετράει ό,τι φαίνεται πραγματικά τη στιγμή εκείνη, με το vh να μένει ως εφεδρεία για παλιότερους browsers. */ max-height:88vh; max-height:calc(100dvh - 32px - var(--sat) - var(--sab)); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } /* ΦΑΡΔΥ ΠΑΡΑΘΥΡΟ — ΜΟΝΟ ΓΙΑ ΛΙΣΤΕΣ. Ο επιλογέας καταλόγου δείχνει όνομα είδους, μονάδα και τιμή σε μία σειρά. Στα 520px το όνομα —που είναι και το μόνο που διαβάζει ο χειριστής— έπαιρνε τον λιγότερο χώρο και κοβόταν. Οι φόρμες μένουν στενές επίτηδες: ένα πεδίο στα 760px δεν διαβάζεται καλύτερα, το μάτι απλώς ταξιδεύει περισσότερο. */ .modal.wide{max-width:760px} /* ΚΑΝΕΝΑ ΠΕΔΙΟ ΔΕΝ ΦΑΡΔΑΙΝΕΙ ΤΟ ΠΑΡΑΘΥΡΟ. Τα input[type=date] και [type=time] του iOS έχουν ΔΙΚΟ ΤΟΥΣ ελάχιστο πλάτος, μεγαλύτερο από το κελί που τους δίνει το πλέγμα. Χωρίς `min-width:0` το πλέγμα υποχωρεί, το παράθυρο φαρδαίνει πέρα από την οθόνη, και μοιάζει να μην κεντράρει — ενώ κεντράρει μια χαρά, απλώς δεν χωράει. */ .modal input,.modal select,.modal textarea{max-width:100%;min-width:0} .modal input[type=date],.modal input[type=time]{ -webkit-appearance:none;appearance:none;min-width:0;width:100%; } /* Τα παιδιά ενός grid ΔΕΝ συρρικνώνονται κάτω από το περιεχόμενό τους αν δεν τους το πεις ρητά — αυτή είναι η άλλη μισή αιτία του ίδιου φαινομένου. */ .modal .fg,.modal .fg2{min-width:0} .modal .fg > *,.modal .fg2 > *{min-width:0} .modal .mh{padding:20px 22px 0;display:flex;align-items:flex-start;gap:12px} .modal .mh h2{flex:1} .modal .mb{padding:18px 22px} /* ── Το υποσέλιδο του παραθύρου ─────────────────────────────────────────────── ΠΛΕΓΜΑ ΙΣΩΝ ΣΤΗΛΩΝ, ΟΧΙ flex-wrap. Με flex κάθε κουμπί έπαιρνε το πλάτος του κειμένου του: «Κλείσιμο» έβγαινε μισό από «Αναφορά προβλήματος», η σειρά τύλιγε σε τρία σκαλοπάτια άνισου μήκους, και η «Αποσύνδεση» κατέληγε μόνη της δεξιά. Δεν ήταν μόνο άσχημο — δεν διαβαζόταν ως σύνολο επιλογών. Ίσες στήλες: το μάτι τις σαρώνει ως λίστα και ο στόχος αφής είναι ο ίδιος για όλες. Το auto-fit κρατά τα λίγα κουμπιά σε μία σειρά όταν χωράνε. */ .modal .mf{ padding:0 22px 20px; display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px; } .modal .mf .btn{width:100%;justify-content:center;min-height:44px} /* Η κύρια ενέργεια μπαίνει ΤΕΛΕΥΤΑΙΑ στη σειρά ανάγνωσης, όποια κι αν είναι η σειρά στον κώδικα: σε στενή οθόνη πρέπει να είναι το κουμπί που ακουμπά ο αντίχειρας, όχι αυτό που πατιέται κατά λάθος πρώτο. */ .modal .mf .btn.pri{order:9} .x{background:none;border:none;cursor:pointer;padding:4px;color:var(--mut);line-height:0} .x:hover{color:var(--ink)} /* ── Εκτός σύνδεσης ──────────────────────────────────────────────────────── */ /* Ο τεχνίτης πρέπει να ΞΕΡΕΙ ότι βλέπει αποθηκευμένα στοιχεία — αλλιώς θα νομίζει ότι η εργασία που έκλεισε δεν καταγράφηκε και θα την ξανακλείσει. */ #offBar{ position:fixed;left:0;right:0;bottom:0;z-index:150; background:var(--warn);color:#fff;text-align:center; padding:9px 14px calc(9px + var(--sab));font-size:12.5px;font-weight:600; box-shadow:0 -2px 12px rgba(85,72,67,.16); } @media print{ #offBar{display:none} } /* ── Πρόσκληση εγκατάστασης & ανανέωση έκδοσης ──────────────────────────────── Δύο μπάρες που κάθονται ΠΑΝΩ από το υποσέλιδο, όχι πάνω από το περιεχόμενο: καμία από τις δύο δεν είναι τόσο επείγουσα ώστε να σκεπάσει αυτό που κάνει ο χρήστης. Και οι δύο κλείνουν με ✕ — μια μπάρα που δεν κλείνει είναι μπανεράκι διαφήμισης, και τα μπανεράκια αγνοούνται μαζί με ό,τι χρήσιμο λένε. */ .instbar,.updbar{ position:fixed;left:12px;right:12px;bottom:calc(var(--foot-h) + var(--sab) + 12px);z-index:140; display:flex;align-items:center;gap:12px; padding:12px 14px;border-radius:var(--r); background:var(--brand-ink);color:#fff;box-shadow:var(--sh-lg); font-size:13px; } @media (min-width:861px){ .instbar,.updbar{left:auto;right:22px;max-width:420px} } .instbar .ib-txt{flex:1;min-width:0;line-height:1.45} /* ΜΟΝΟ ΤΟ ΑΜΕΣΟ ΠΑΙΔΙ. Χωρίς το «>», κάθε μέσα στη δεύτερη γραμμή γινόταν κι αυτό block: το «Κοινή χρήση ↑ κάτω → Προσθήκη στην αρχική οθόνη» έσπαγε σε πέντε κομμάτια και διαβαζόταν σαν χαλασμένο κείμενο. */ .instbar .ib-txt > b{display:block;font-weight:700;font-size:13.5px} .instbar .ib-txt span b{font-weight:700} .instbar .ib-have{background:rgba(255,255,255,.16);color:#fff;white-space:nowrap} .instbar .ib-have:hover{background:rgba(255,255,255,.26)} .instbar .ib-txt span{display:block;color:rgba(255,255,255,.86);font-size:12px;margin-top:2px} .updbar span{flex:1;min-width:0;line-height:1.45} .updbar span b{font-variant-numeric:tabular-nums} .instbar button,.updbar button{ border:0;border-radius:100px;cursor:pointer;font-family:inherit; font-size:12.5px;font-weight:700;padding:9px 16px;flex:0 0 auto; /* 40px ύψος αφής: αυτά τα πατάει και ο τεχνίτης στο εργοτάξιο. */ min-height:40px; } .instbar .ib-go,.updbar .upd-go{background:#fff;color:var(--brand-ink)} .instbar .ib-go:hover,.updbar .upd-go:hover{background:var(--panel)} .instbar .ib-x,.updbar .upd-x{ background:rgba(255,255,255,.14);color:#fff;padding:9px 12px;font-size:14px;line-height:1; } .instbar .ib-x:hover,.updbar .upd-x:hover{background:rgba(255,255,255,.26)} /* ── Η ΜΠΑΡΑ ΠΟΥ ΔΕΝ ΧΩΡΑΓΕ ΣΤΟ ΚΙΝΗΤΟ, ΕΝΩ ΓΙΑ ΚΙΝΗΤΟ ΦΤΙΑΧΤΗΚΕ ────────── Μετρημένο σε iPhone 390px: τρία κουμπιά ορισμένα να μη μαζεύουν έπαιρναν 285 από τα 338 διαθέσιμα pixel. Στο κείμενο έμεναν 53 — μία λέξη ανά γραμμή, «Εγκατάστησε / την / εφαρμογή», πέντε γραμμές ύψος, και η μπάρα σκέπαζε το μισό περιεχόμενο από κάτω της. Η ειρωνεία είναι ότι αυτή η μπάρα υπάρχει ΜΟΝΟ για το κινητό: σε υπολογιστή πιάνει 420px και δείχνει μια χαρά — γι' αυτό και δεν το είδε κανείς. Ό,τι ελέγχεται μόνο εκεί που δεν χρησιμοποιείται, δεν ελέγχεται. Κάτω από 560px: κείμενο πάνω σε όλο το πλάτος, κουμπιά από κάτω. */ @media (max-width:560px){ .instbar,.updbar{flex-wrap:wrap;gap:10px} .instbar .ib-txt,.updbar span{flex:1 0 100%} .instbar .ib-go,.instbar .ib-have,.updbar .upd-go{flex:1 1 auto} .instbar .ib-x,.updbar .upd-x{flex:0 0 auto;margin-left:auto} } @media print{ .instbar,.updbar{display:none!important} } /* ── ΕΓΚΑΤΕΣΤΗΜΕΝΗ ΕΦΑΡΜΟΓΗ (PWA) ──────────────────────────────────────────── ΤΟ ΠΡΟΒΛΗΜΑ, ΜΕΤΡΗΜΕΝΟ ΣΕ iPhone: το υποσέλιδο ΕΦΤΑΝΕ κάτω — το χρώμα του έπιανε ως την άκρη — αλλά το ΠΕΡΙΕΧΟΜΕΝΟ του σπρωχνόταν πάνω από ολόκληρη την ασφαλή περιοχή (34pt). Το αποτέλεσμα ήταν μια φαρδιά καφέ λωρίδα κάτω από τα γράμματα, που διαβάζεται ως «το υποσέλιδο δεν είναι τέρμα κάτω». Στον browser η απόσταση αυτή χρειάζεται: από κάτω κάθεται η γραμμή εργαλείων του Safari. Στην εγκατεστημένη εφαρμογή δεν υπάρχει τίποτα εκεί εκτός από τη γραμμή χειρονομιών, που είναι λεπτή — κρατάμε όσο χρειάζεται για να μην πέφτουν τα γράμματα από κάτω της, και όχι περισσότερο. Το `display-mode: standalone` πιάνει iOS και Android· το `fullscreen` μπαίνει για όσους το δηλώνουν έτσι στο manifest. */ @media (display-mode:standalone),(display-mode:fullscreen){ .footbar{ /* Λίγο πάνω από τη γραμμή χειρονομιών, όχι όλο το inset. */ padding-bottom:calc(var(--sab) * .35 + 2px); height:calc(var(--foot-h) + var(--sab) * .35 + 2px); } /* Το περιεχόμενο ακολουθεί το νέο, χαμηλότερο ύψος. */ .main{padding-bottom:calc(var(--foot-h) + var(--sab) * .35 + 30px)} .nav{bottom:calc(var(--foot-h) + var(--sab) * .35 + 2px)} .instbar,.updbar{bottom:calc(var(--foot-h) + var(--sab) * .35 + 14px)} /* Η πρόσκληση εγκατάστασης δεν έχει νόημα σε ήδη εγκατεστημένη εφαρμογή. Το app.js το ελέγχει ήδη, αλλά ο κανόνας εδώ είναι το δίχτυ: αν ποτέ ξεφύγει, δεν εμφανίζεται. */ .instbar[data-kind="guide"]{display:none} } /* ── Toast ───────────────────────────────────────────────────────────────── */ #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);z-index:400; background:var(--ink);color:#fff;padding:11px 20px;border-radius:100px;font-size:13px;font-weight:600; box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.24s;max-width:90vw;text-align:center} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast.err{background:var(--alert)} #toast.ok{background:var(--ok)} /* ── Empty / loading ─────────────────────────────────────────────────────── */ .empty{text-align:center;padding:44px 20px;color:var(--mut);font-size:13.5px} /* ── ΤΟ ΑΝΟΙΓΜΑ ΕΡΓΟΥ ───────────────────────────────────────────────────── Δύο οθόνες δείχνουν την ίδια ροή —η ουρά των προσφορών και η καρτέλα του υποψηφίου— οπότε τα στυλ ζουν εδώ και όχι μέσα στη μία από τις δύο. Όσο ζούσαν σε μία σελίδα, η δεύτερη τα έβλεπε ως άστυλο κείμενο. Οι κάρτες είναι σκόπιμα ΙΔΙΕΣ με την οθόνη «Κατηγορίες & βήματα»: ο χειριστής που τις έμαθε εκεί δεν ξαναμαθαίνει τίποτα εδώ. */ .po-fam{ font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--brand-ink);margin:14px 0 7px;display:flex;align-items:baseline;gap:7px } .po-fam:first-child{margin-top:0} .po-fam small{font-size:10.5px;font-weight:600;letter-spacing:.02em; text-transform:none;color:var(--mut)} .po-cat{ display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin-bottom:7px; border:2px solid var(--line);border-radius:var(--r);padding:10px 12px; background:var(--bg);cursor:pointer;font-family:inherit;transition:border-color .14s } .po-cat:hover{border-color:var(--brand-ink);background:var(--panel)} .po-ico{flex:0 0 26px;font-size:21px;line-height:1;text-align:center} .po-t{flex:1;min-width:0} .po-t b{display:block;font-size:14px;font-weight:720;color:var(--brand-ink)} .po-t small{display:block;font-size:11.5px;color:var(--mut);line-height:1.4;margin-top:2px} .po-n{flex:0 0 auto;text-align:center;font-size:16px;font-weight:800;line-height:1; color:var(--brand-ink);font-variant-numeric:tabular-nums} .po-n i{display:block;font-size:9.5px;font-weight:700;font-style:normal; letter-spacing:.04em;color:var(--mut);margin-top:3px} /* Η σύνοψη πριν το άνοιγμα: ζευγάρια «τι» / «πόσο», για έλεγχο με το μάτι. Το παλιό μήνυμα έλεγε «κέντρο κόστους BU-01» — κωδικό που δεν επαληθεύεται. */ .po-sum{border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .po-row{display:flex;align-items:baseline;gap:12px;padding:9px 13px; border-bottom:1px solid var(--hair);font-size:13px} .po-row:last-child{border-bottom:none} .po-row span{flex:0 0 40%;color:var(--mut);font-size:12px} .po-row b{flex:1;font-weight:700} .po-row b small{font-weight:600;color:var(--mut);font-size:11.5px} .po-row b.warn{color:var(--warn)} /* Η αναμονή. ΤΟ ΠΑΡΑΘΥΡΟ ΜΕΝΕΙ ΑΝΟΙΧΤΟ ΚΑΙ ΑΔΕΙΟ ΑΠΟ ΚΟΥΜΠΙΑ: ο χειριστής βλέπει ότι κάτι γίνεται, και δεν υπάρχει τίποτα να ξαναπατήσει. Το άνοιγμα έργου στέλνει στο SoftOne επί τόπου — ο χρόνος είναι πραγματικός και λέγεται, αντί να κρύβεται πίσω από μια οθόνη που μοιάζει κολλημένη. */ .po-wait{display:flex;align-items:center;gap:15px;padding:6px 0} .po-wait p{margin:0;font-size:13.5px;line-height:1.6} .po-spin{ flex:0 0 auto;width:26px;height:26px;border-radius:50%; border:3px solid var(--line);border-top-color:var(--brand-ink); animation:po-turn .8s linear infinite } @keyframes po-turn{ to{ transform:rotate(360deg) } } /* Όποιος έχει ζητήσει λιγότερη κίνηση, τη βλέπει να σβήνει και να ανάβει αντί να γυρίζει: η πληροφορία «γίνεται κάτι» μένει, ο ίλιγγος φεύγει. */ @media (prefers-reduced-motion:reduce){ .po-spin{animation:po-fade 1.2s ease-in-out infinite} @keyframes po-fade{ 0%,100%{opacity:.25} 50%{opacity:1} } } /* ── Η απάντηση της ΓΓΠΣ ────────────────────────────────────────────────── Τρεις καταστάσεις με ΧΡΩΜΑ, όχι με εικονίδιο: «βρέθηκε», «δεν βρέθηκε», και «βρέθηκε αλλά είναι ανενεργό» — που είναι η επικίνδυνη. Το ανενεργό ΑΦΜ φαίνεται σωστό σε κάθε άλλο έλεγχο και απορρίπτεται από το myDATA αφού έχει παραδοθεί η δουλειά. */ .aade{display:block;margin-top:5px;font-size:11.5px;line-height:1.45} .aade.ok{color:var(--ok)} .aade.no{color:var(--mut)} .aade.bad{color:var(--alert);font-weight:600} .skel{background:linear-gradient(90deg,var(--panel) 25%,#eee 50%,var(--panel) 75%); background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--r-sm);height:14px} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ── Footer ──────────────────────────────────────────────────────────────── */ .foot{ margin-top:44px;padding-top:18px;border-top:1px solid var(--line); font-size:11.5px;color:var(--mut);display:flex;gap:14px;flex-wrap:wrap;align-items:center; } .foot .spacer{flex:1} /* ── Grid helpers ────────────────────────────────────────────────────────── */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} /* ΤΟ ΚΕΛΙ ΤΟΥ ΠΛΕΓΜΑΤΟΣ ΕΠΙΤΡΕΠΕΤΑΙ ΝΑ ΜΑΖΕΨΕΙ. Προεπιλογή του CSS: ένα παιδί πλέγματος ΔΕΝ στενεύει κάτω από το ελάχιστο πλάτος του περιεχομένου του (`min-width:auto`). Ένας πίνακας με ελάχιστο πλάτος 640px μέσα σε κελί σήμαινε κελί 640px — και σελίδα 658px σε οθόνη 390. Ούτε το `overflow-x:auto` του περιτυλίγματος έσωζε την κατάσταση: η κύλιση δουλεύει μόνο όταν το κουτί έχει ΟΡΙΣΜΕΝΟ πλάτος να κυλήσει μέσα του, κι εδώ το πλάτος το όριζε το ίδιο το περιεχόμενο. Με το `min-width:0` το κελί μένει στα μέτρα της οθόνης και ο πίνακας κυλά μέσα στο δικό του πλαίσιο — εκεί που ήταν πάντα η πρόθεση. */ .g2 > *,.g3 > *{min-width:0} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .mt0{margin-top:0}.mb0{margin-bottom:0}.mt24{margin-top:24px} /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width:1080px){ .g2{grid-template-columns:1fr} } @media (max-width:860px){ :root{--head-h:56px} .burger{display:flex} /* ΤΟ ΦΟΝΤΟ ΔΕΝ ΞΑΝΑΟΡΙΖΕΤΑΙ ΕΔΩ — ΚΑΙ ΑΥΤΟ ΕΚΡΥΨΕ ΟΛΟ ΤΟ ΜΕΝΟΥ. Η γραμμή έλεγε `background:var(--bg)`, δηλαδή ΛΕΥΚΟ, από την εποχή που το μενού ήταν λευκό παντού. Όταν το κέλυφος σκούρυνε (114.0.0), τα γράμματα έγιναν λευκά — αλλά ΜΟΝΟ σε κινητό το φόντο έμενε λευκό εδώ. Αποτέλεσμα: λευκά γράμματα σε λευκό φόντο, και ένα συρτάρι που φαινόταν άδειο· ορατό ήταν μόνο το ενεργό στοιχείο, που έχει δικό του γέμισμα. ΤΟ ΜΑΘΗΜΑ: μια αλλαγή χρώματος δεν είναι ολοκληρωμένη όσο υπάρχει έστω ένα media query που ξαναορίζει το ίδιο χρώμα αλλού. Το φόντο ορίζεται ΜΙΑ φορά, στον βασικό κανόνα του `.nav`, και εδώ αλλάζει μόνο η θέση. */ .nav{ transform:translateX(-100%);transition:transform .22s ease; box-shadow:var(--sh-lg);width:270px; } .nav.open{transform:translateX(0)} .main{margin-left:0;padding:calc(var(--band-h) + var(--head-h) + 20px) 16px calc(var(--foot-h) + var(--sab) + 28px)} .head{padding:0 calc(14px + var(--sar)) 0 calc(14px + var(--sal));gap:11px} .head .hitem.hide-m{display:none} /* Στο κινητό φεύγει η ετικέτα «ΕΤΑΙΡΕΙΑ», όχι ο διακόπτης. Τα ονόματα των δύο εταιρειών λένε ήδη τι είναι· η λέξη «Εταιρεία» από πάνω τους απλώς τρώει τον χώρο που χρειάζονται τα κουμπιά για να χωρέσουν. */ /* ΤΟ PADDING ΚΡΑΤΑ ΤΗΝ ΕΓΚΟΠΗ. Η πρώτη γραφή εδώ ήταν `padding:0 10px`, που μηδένιζε το padding-top της ασφαλούς περιοχής — ακριβώς στο πλάτος όπου υπάρχει Dynamic Island. Το αποτέλεσμα ήταν ότι η λωρίδα ΨΗΛΩΝΕ σωστά, αλλά τα κουμπιά έμεναν κολλημένα στην κορυφή και τα έτρωγε το νησί: η διόρθωση φαινόταν να δουλεύει, και δεν δούλευε. Κάθε override του padding εδώ πρέπει να ξαναγράψει και τις τέσσερις πλευρές. */ .topbar{ padding:var(--sat-pad) calc(10px + var(--sar)) 0 calc(10px + var(--sal)); gap:8px; } .topbar .lbl{display:none} .topbar .entsw button{padding:4px 10px;font-size:11.5px} .userchip .who{display:none} .userchip{padding:4px} /* ΣΤΟ ΚΙΝΗΤΟ ΜΕΝΕΙ Ο,ΤΙ ΑΛΛΑΖΕΙ: το ρολόι της ανοιχτής βάρδιας και το κουμπί. Η λέξη «Βάρδια» φεύγει όταν ΔΕΝ τρέχει βάρδια — το κουμπί λέει ήδη «Έναρξη», και η ετικέτα έτρωγε τον χώρο του ονόματος. Όταν τρέχει, το ρολόι ΜΕΝΕΙ: είναι η μόνη πληροφορία που δεν μπορεί να συμπεράνει. */ .shchip{padding-left:8px;gap:7px} .shchip:not(.on) .sh-st b{display:none} .shchip button{padding:6px 11px} h1{font-size:21px} .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .kpi{padding:14px} .kpi .val{font-size:29px} .panel > .pb{padding:14px} .g2,.g3{grid-template-columns:1fr;gap:14px} .backdrop{position:fixed;inset:0;background:rgba(85,72,67,.35);z-index:39;display:none} .backdrop.open{display:block} /* ── ΤΟ ΥΠΟΣΕΛΙΔΟ ΤΥΛΙΓΕΤΑΙ, ΔΕΝ ΚΟΒΕΤΑΙ ──────────────────────────────── Ήταν μία σειρά 34px με `white-space:nowrap` και `overflow-x:auto`. Σε κινητό η έκδοση, η κατάσταση άδειας και τα credits έβγαιναν εκτός οθόνης και για να φανούν χρειαζόταν πλάγια κύλιση μέσα σε μια μπάρα 34 pixel — που δεν την κάνει κανείς και δεν φαίνεται καν ότι υπάρχει. Ό,τι δεν φαίνεται, δεν υπάρχει· και εδώ χανόταν ακριβώς ο αριθμός έκδοσης, δηλαδή το πρώτο πράγμα που ζητάμε όταν κάποιος αναφέρει πρόβλημα. Το ύψος δίνεται στο --foot-h ώστε να το ακολουθήσουν και το padding του .main και το bottom του μενού — αλλιώς το περιεχόμενο θα κρυβόταν πίσω από την ψηλότερη μπάρα. */ :root{--foot-h:46px} .footbar{ height:auto;min-height:var(--foot-h); flex-wrap:wrap;white-space:normal;overflow-x:visible; justify-content:center;align-content:center; padding:4px 12px;gap:1px 11px;line-height:1.35;font-size:11px; } /* Ο διαστολέας και οι κάθετες γραμμές χωρίζουν σειρά, όχι στοιχεία: με τύλιγμα μπορούν να καταλήξουν στην αρχή γραμμής και να μοιάζουν με τυπογραφικό λάθος. Το κενό ανάμεσα αρκεί. */ .footbar .spacer, .footbar .sep{display:none} } @media (max-width:520px){ .kpis{grid-template-columns:1fr 1fr} .kpi .val{font-size:26px} .kpi.warn .val{font-size:13.5px} } /* ── ΚΑΝΕΝΑ ΠΕΔΙΟ ΚΑΤΩ ΑΠΟ 16px ΣΕ ΚΙΝΗΤΟ ───────────────────────────────── Δεν είναι θέμα ύφους, είναι κανόνας της πλατφόρμας: το Safari του iPhone κάνει ΑΥΤΟΜΑΤΟ ζουμ μόλις ακουμπήσεις πεδίο με γραμματοσειρά μικρότερη από 16px — και ΔΕΝ ξαναβγαίνει όταν φύγεις από αυτό. Ο χρήστης μένει σε μια σελίδα μεγεθυμένη κατά ~30%, με το δεξί μισό εκτός οθόνης, και το μόνο που έκανε ήταν ότι πάτησε το πεδίο αναζήτησης. Μετρήθηκαν εννιά οθόνες με πεδία στα 13–15px: αναζήτηση πελατών, έργων και οικονομικών, φίλτρα lead, ημερομηνίες υπερωριών, επιλογή εργαζομένου στο ημερολόγιο, καταγραφή επαφής στην καρτέλα υποψηφίου. ΓΙΑΤΙ `!important`: οι σελίδες ορίζουν τα δικά τους μεγέθη με ισχυρότερους επιλογείς (`.actbox .inp`, `.filters .inp`). Η εναλλακτική ήταν να απαριθμηθούν εδώ και οι εννιά — μια λίστα που θα ξεχαστεί με την επόμενη οθόνη. Αυτό εδώ δεν είναι προτίμηση που μπορεί να παρακαμφθεί: είναι όριο της συσκευής, και ισχύει για κάθε πεδίο, για πάντα. Σε υπολογιστή δεν αλλάζει τίποτα. */ @media (max-width:860px){ .inp,input,select,textarea{font-size:16px!important} } @media print{ .topbar,.head,.nav,.btn,.foot,.footbar{display:none!important} .main{margin:0;padding:0;max-width:none} .panel{break-inside:avoid;border-color:#ccc} } /* Σύνδεσμος μέσα στο υποσέλιδο — υπογραμμίζεται μόνο στο hover, ώστε η μπάρα να μη μοιάζει με σειρά από links. */ .footbar a.link{color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid transparent} .footbar a.link:hover{color:#fff;border-bottom-color:var(--brand)} /* ── ΕΠΕΞΗΓΗΣΕΙΣ ──────────────────────────────────────────────────────────── Το «;» είναι μικρό αλλά ο στόχος αφής είναι 28px: μικρότερο δεν πατιέται με γάντι. Χαμηλή αντίθεση σε ηρεμία, ώστε να μην τραβά το μάτι από την πράξη — αλλά σκουραίνει στο hover, για να μη μοιάζει ανενεργό. */ .tip{ display:inline-flex;align-items:center;justify-content:center; width:19px;height:19px;margin-left:6px;padding:0;vertical-align:middle; border:1.5px solid var(--s2);border-radius:50%;background:transparent; font-family:inherit;font-size:11px;font-weight:800;line-height:1;color:var(--mut); cursor:pointer;flex:0 0 auto;position:relative; } /* Ο πραγματικός στόχος αφής, αόρατος, γύρω από το μικρό κύκλωμα. */ .tip::after{content:'';position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px} .tip:hover{border-color:var(--brand-ink);color:var(--brand-ink)} .tipbub{ position:fixed;z-index:120;padding:11px 13px;border-radius:var(--r); background:var(--ink);color:#fff;font-size:13px;line-height:1.55; box-shadow:var(--sh-lg);pointer-events:none; } /* ── «Βλέπεις ως» ────────────────────────────────────────────────────────── Κόκκινη, πάνω από όλα, σε κάθε σελίδα, και ολόκληρη κουμπί επιστροφής. Δεν είναι υπερβολή: ο διαχειριστής που ξεχνά ότι βλέπει ως κάποιον άλλον γράφει ώρες και κλείνει εκκρεμότητες στο όνομά του, και το ανακαλύπτει όταν κάποιος ρωτήσει «ποιος το έκανε αυτό». Η ενόχληση είναι το ζητούμενο. */ .impbar{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding:calc(9px + env(safe-area-inset-top)) 14px 9px; background:#8c2f22;color:#fff;cursor:pointer; font-size:13px;line-height:1.35;-webkit-tap-highlight-color:transparent; } .impbar b{font-weight:700} .impbar span{opacity:.85;font-size:12px} .impbar:active{background:#75261b} /* ═══════════════════════════════════════════════════════════════════════════ ΤΟ ΒΟΗΘΗΜΑ — μικρό «?» που εξηγεί επί τόπου (εντολή πελάτη 15/09/2026: «tooltip σε καίρια σημεία») ΠΟΥ ΜΠΑΙΝΕΙ: σε νούμερα και όρους που ο χειριστής δεν μπορεί να συμπεράνει μόνος του — «μικτό αποτέλεσμα», «διαφορά μητρώου», «ΚΡΙΣΙΜΟ», «χρειάζεται προσοχή». ΟΧΙ σε κουμπιά που λένε ήδη τι κάνουν: βοήθημα παντού σημαίνει βοήθεια πουθενά. ΓΙΑΤΙ ΟΧΙ ΣΚΕΤΟ title="" Το native tooltip αργεί ένα δευτερόλεπτο, δεν σπάει σε γραμμές, και στο κινητό ΔΕΝ ΕΜΦΑΝΙΖΕΤΑΙ ΠΟΤΕ — δηλαδή λείπει ακριβώς εκεί όπου δουλεύει το συνεργείο. ΑΝΟΙΓΕΙ ΚΑΙ ΜΕ ΑΦΗ: το `:focus` κάνει το «?» να δουλεύει με πάτημα, όχι μόνο με ποντίκι. Είναι