/* ═══════════════════════════════════════════════════════════════════ Lead Management — κοινό θέμα Παλέτα από connectoras.gr/assets/css/connectoras.css ═══════════════════════════════════════════════════════════════════ */ :root{ --bg:#F6F9FC; --surface:#FFFFFF; --ink:#0D1B2A; --muted:#51647A; --line:#E4ECF3; --navy:#0B2238; --navy-2:#081826; --on-dark:#EAF2FA; --on-dark-mut:#9FB6CC; --accent:#F96D64; --accent-hover:#EF5249; --accent-tint:rgba(249,109,100,.12); --blue:#045089; --blue-bright:#2E8FD8; --green:#16B378; --gold:#E0A92E; --red:#B4707A; --r:10px; --r-lg:16px; --shadow-sm:0 2px 10px rgba(4,80,137,.06),0 1px 2px rgba(4,80,137,.05); --shadow-lg:0 18px 50px rgba(4,80,137,.14); --sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --nav-w:14rem; } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:.9rem; line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:var(--blue-bright); text-decoration:none} a:hover{text-decoration:underline} /* ── Σκελετός ────────────────────────────────────────────────────── */ .shell{display:flex; min-height:100vh} .nav{ width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--navy); color:var(--on-dark); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .nav-logo{padding:1.4rem 1.25rem 1.1rem} .nav-logo img{width:9.5rem; height:auto; display:block} .nav-links{flex:1; padding:.5rem 0; overflow-y:auto} .nav a{ display:flex; align-items:center; gap:.65rem; padding:.6rem 1.25rem; color:var(--on-dark-mut); font-size:.86rem; border-left:3px solid transparent; transition:background .15s,color .15s,border-color .15s; } .nav a:hover{background:rgba(255,255,255,.05); color:var(--on-dark); text-decoration:none} .nav a.on{background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--accent); font-weight:600} .nav a .ico{width:1.1rem; text-align:center; opacity:.85} /* ── Ενότητες μενού ── Η κεφαλίδα ενότητας είναι button, όχι link: δεν πλοηγεί, ανοίγει. Αν ήταν link θα έπρεπε να δείχνει κάπου, και το «κάπου» θα ήταν αυθαίρετο. */ .nav-grp-h{ display:flex; align-items:center; gap:.65rem; width:100%; text-align:left; padding:.6rem 1.25rem; background:none; border:0; border-left:3px solid transparent; color:var(--on-dark-mut); font-size:.86rem; font-family:inherit; cursor:pointer; transition:background .15s,color .15s; } .nav-grp-h:hover{background:rgba(255,255,255,.05); color:var(--on-dark)} .nav-grp-h.in{color:#fff; font-weight:600} .nav-grp-h .ico{width:1.1rem; text-align:center; opacity:.85} .nav-grp-h .car{margin-left:auto; opacity:.5; transition:transform .18s} .nav-grp.open .nav-grp-h .car{transform:rotate(90deg)} /* Κλειστή ενότητα: μηδέν ύψος, χωρίς να χαθεί η μετάβαση. ΤΟ ΟΡΙΟ ΕΚΟΒΕ ΣΤΟΙΧΕΙΑ ΤΟΥ ΜΕΝΟΥ. Ήταν 22rem — χωρούσε 11 συνδέσμους. Η ενότητα CRM έφτασε τους 13, οπότε οι δύο τελευταίες σελίδες («Καθυστερημένα» και «Συμφωνίες εμπιστευτικότητας») ήταν κυριολεκτικά αόρατες: κομμένες από το overflow:hidden, χωρίς καμία ένδειξη και χωρίς scroll. Ο χρήστης έψαχνε σελίδες που είχαν ήδη παραδοθεί και δούλευαν. Το max-height δεν γίνεται «none» χωρίς να χαθεί η μετάβαση, οπότε μπαίνει άφθονο περιθώριο: 60rem σηκώνει ~30 συνδέσμους. Το κόστος ενός γενναιόδωρου ορίου είναι ελαφρώς ταχύτερο άνοιγμα· το κόστος ενός στενού είναι αόρατες λειτουργίες. */ .nav-sub{max-height:0; overflow:hidden; transition:max-height .22s ease} .nav-grp.open .nav-sub{max-height:60rem} .nav-sub a{padding:.42rem 1.25rem .42rem 3rem; font-size:.82rem} .nav-sub a.on{border-left-color:var(--accent)} .nav-user{ padding:.9rem 1.25rem; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:var(--on-dark-mut); } .nav-user b{display:block; color:#fff; font-size:.85rem; font-weight:600} .nav-user a{padding:0; display:inline; color:var(--accent); font-size:.75rem} .main{flex:1; min-width:0; padding:1.5rem 1.75rem 3rem} .head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap} .head h1{font-size:1.35rem; font-weight:700; margin:0 0 .15rem; letter-spacing:-.01em} .head .sub{color:var(--muted); font-size:.83rem} /* Οι ενέργειες της κεφαλίδας. Χωρίς κανόνα, τα κουμπιά κολλούσαν μεταξύ τους και σε στενή οθόνη ξεχείλιζαν αντί να τυλιχτούν. Δεξιά στοίχιση: η κεφαλίδα είναι space-between, ο τίτλος αριστερά και οι ενέργειες απέναντί του. */ .head-act{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end} /* Κωδικοί και logins: σταθερό πλάτος χαρακτήρα ώστε να στοιχίζονται κάθετα σε λίστα και να ξεχωρίζει το 0 από το O. Χρησιμοποιείται ήδη σε crm_team.html και crmlist.js χωρίς να έχει οριστεί ποτέ. */ .mono{font-family:ui-monospace,"SFMono-Regular","Consolas","Liberation Mono",monospace; font-size:.95em; letter-spacing:-.01em} /* ── Κάρτες ──────────────────────────────────────────────────────── */ .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)} .card-h{padding:.9rem 1.15rem; border-bottom:1px solid var(--line); font-weight:650; font-size:.92rem; display:flex; justify-content:space-between; align-items:center; gap:.75rem} .card-b{padding:1.15rem} .card-b.tight{padding:0} .grid{display:grid; gap:1rem} .g-kpi{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))} .g-2{grid-template-columns:1.6fr 1fr} @media(max-width:60rem){.g-2{grid-template-columns:1fr}} .kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; box-shadow:var(--shadow-sm)} .kpi .lbl{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem} .kpi .val{font-size:1.65rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums} .kpi .val.sm{font-size:1.3rem} .kpi.alert .val{color:var(--accent)} .kpi .kfoot{margin-top:.25rem; font-size:.7rem; line-height:1.4; color:var(--muted)} /* Το KPI που οδηγεί κάπου: φαίνεται ότι πατιέται, χωρίς να γίνεται κουμπί. Ένα νούμερο που δείχνει πρόβλημα πρέπει να ανοίγει τη λίστα του. */ a.kpi.link{display:block; text-decoration:none; color:inherit; transition:box-shadow .12s ease, transform .12s ease} a.kpi.link:hover{box-shadow:0 2px 10px rgba(16,24,40,.10); transform:translateY(-1px)} a.kpi.good .val{color:var(--green,#1D6B38)} /* ══════════ ΑΝΑΖΗΤΗΣΗ ΠΕΛΑΤΗ ΣΤΟ SOFTONE ══════════ Ξεχωριστό πλαίσιο πάνω από τη φόρμα: δεν είναι πεδίο του lead, είναι εργαλείο που ΓΕΜΙΖΕΙ τα πεδία. Αν έμοιαζε με τα υπόλοιπα, θα διαβαζόταν ως «ένα ακόμη πράγμα να συμπληρώσω». */ .s1box{background:#F4F8FB; border:1px solid #D6E4EE; border-radius:10px; padding:.75rem .9rem; margin-bottom:1rem} .s1box .field{margin-bottom:0} .s1row{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.45rem .65rem; margin-top:.4rem; cursor:pointer; font:inherit} .s1row:hover{border-color:var(--blue,#2E8FD8); background:#F7FBFE} .s1row .n{display:block; font-weight:600; font-size:.85rem; line-height:1.3} .s1row .m{display:block; font-size:.72rem; color:var(--muted); margin-top:.1rem} .s1empty{font-size:.78rem; color:var(--muted); padding:.5rem .2rem 0} .s1ok{font-size:.78rem; color:#1D6B38; padding:.5rem .2rem 0} /* ══════════ ΣΠΑΣΙΜΟ ΣΕ ΕΡΓΑΣΙΕΣ ══════════ Κάθε γραμμή είναι ΠΡΟΤΑΣΗ, όχι απόφαση: σβήνεται και αλλάζει. Όσες το AI δήλωσε αβέβαιες ξεχωρίζουν οπτικά — αν έμοιαζαν με τις υπόλοιπες, θα περνούσαν χωρίς έλεγχο, που είναι ακριβώς ο κίνδυνος. */ .spr{border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; margin-bottom:.5rem; background:#fff} .spr.low{border-color:#F0D9A8; background:#FFFCF6} .spr-h{display:flex; gap:.5rem; align-items:center} .spr-h .spr-on{width:auto; flex:0 0 auto} .spr-t{flex:1; font-weight:600} .spr-x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:.9rem; padding:.1rem .35rem; border-radius:4px} .spr-x:hover{background:#FDECEC; color:#A32222} .spr-d{width:100%; margin:.35rem 0; font-size:.82rem} .spr-f{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap} .spr-f select,.spr-f input[type=date]{width:auto; min-width:8rem} .spr-m{width:5rem} .spr-u{display:flex; gap:.3rem; align-items:center; font-size:.75rem; color:var(--muted); cursor:pointer; white-space:nowrap} .spr-u input{width:auto} .spr-lo{font-size:.68rem; padding:.05rem .4rem; border-radius:999px; background:#FBEBD2; color:#8A5300; border:1px solid #F0D9A8} /* ══════════ ΠΙΝΑΚΑΣ: ΤΡΙΑ ΕΠΙΠΕΔΑ ══════════ Ο παλιός πίνακας έδειχνε 24 νούμερα στο ίδιο μέγεθος. Όταν όλα φωνάζουν εξίσου δυνατά, κανένα δεν ακούγεται. Εδώ το μέγεθος είναι ιεραρχία. */ /* 1. Τι θέλει την προσοχή σου — λίγα, μεγάλα, και ΣΥΝΔΕΣΜΟΙ: αν δείχνουν πρόβλημα, ένα κλικ πάει εκεί που λύνεται. */ .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.85rem; margin-bottom:1.1rem} .tile{ display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1rem 1.15rem; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .08s; } .tile:hover{border-color:var(--blue); box-shadow:0 3px 14px rgba(4,80,137,.09); text-decoration:none} .tile:active{transform:translateY(1px)} .tile.bad{border-left:3px solid var(--accent)} .tile.good{border-left:3px solid var(--green, #0F7A55)} .t-lbl{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700} .t-val{font-size:1.85rem; font-weight:700; line-height:1.15; margin:.3rem 0 .1rem; letter-spacing:-.02em} .tile.bad .t-val{color:var(--accent)} .tile.good .t-val{color:var(--green, #0F7A55)} .t-sub{font-size:.76rem; color:var(--muted)} /* ── Ενιαίος πίνακας CRM: τέσσερα κουτιά σε μία οθόνη ──────────────── minmax(0,1fr) και ΟΧΙ 1fr: ένα μεγάλο θέμα σπρώχνει τη στήλη και σπάει το πλέγμα — το ίδιο λάθος που είχε φάει το ημερολόγιο. */ .quads{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.8rem; align-items:start} .quad .card-b{padding:0} .quad .card-h{padding:.6rem .8rem; font-size:.86rem} /* Τα widgets πάνω από τα κουτιά: χαμηλά, ώστε να μη φάνε τη λίστα. */ .tiles.slim .tile{padding:.6rem .85rem} .tiles.slim .t-val{font-size:1.35rem; margin:.15rem 0 0} .tiles.slim .t-sub{display:none} @media (min-height:900px){ .tiles.slim .t-sub{display:block} } .quad .card-h .lnk{font-size:.76rem; font-weight:600; color:var(--blue); white-space:nowrap; text-decoration:none} .quad .card-h .lnk:hover{text-decoration:underline} /* ΥΨΟΣ: οι χειριστές δουλεύουν σε 1920×1080. Αφαιρώντας το chrome του browser και τη nav, μένουν ~820px. Τέσσερα κουτιά × 6 γραμμές × 40px + κεφαλίδες + widgets χωράνε ίσα-ίσα — γι' αυτό οι γραμμές είναι σφιχτές και τα widgets χαμηλά. Ό,τι δεν χωρά είναι ένα κλικ μακριά, δεν χάνεται. */ .qrow{display:flex; gap:.6rem; align-items:center; justify-content:space-between; padding:.42rem .8rem; border-bottom:1px solid var(--line); min-height:2.5rem} .qrow:last-child{border-bottom:0} .qrow:hover{background:#F7FAFC} /* ── ΤΑ ΣΤΟΙΧΕΙΑ ΕΠΑΦΗΣ ΜΕΣΑ ΣΤΗ ΓΡΑΜΜΗ ───────────────────────────────── Σχεδόν κάθε εκκρεμότητα lead είναι «πάρ' τον τηλέφωνο». Χωρίς το νούμερο στη γραμμή, ο χειριστής άνοιγε το lead σε άλλη σελίδα για να το αντιγράψει — δύο κλικ και αλλαγή οθόνης για να κάνει ακριβώς αυτό που λέει ο τίτλος. ΦΟΝΤΟ ΚΑΙ PADDING, ΟΧΙ ΜΙΚΡΑ ΓΡΑΜΜΑΤΑ: ένα τηλέφωνο σε 0,75rem δεν πατιέται από κινητό — και το κινητό είναι ακριβώς η συσκευή από την οποία θα καλέσεις. Ζούσαν μέσα στο tasks.html· μπήκαν εδώ όταν τα χρειάστηκε και η αρχική. Το tasks.html κρατά ακόμη τα δικά του (ίδια) και δεν αλλάζει όψη. */ .trow2{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.35rem} .tcall{display:inline-flex; align-items:center; gap:.25rem; font-size:.82rem; font-weight:600; text-decoration:none; padding:.2rem .5rem; border-radius:6px; background:#E6F4EA; color:#137333; white-space:nowrap} .tcall:hover{filter:brightness(.96)} .tcall.mail{background:#E8F0FE; color:#1A4E8A; font-weight:500} .tmeta{font-size:.78rem; color:var(--muted)} /* ── ΠΟΥ ΤΕΛΕΙΩΝΟΥΝ ΤΑ ΔΙΚΑ ΜΟΥ ── Η λίστα βάζει μπροστά ό,τι είναι ανατεθειμένο σε εμένα και μετά τα υπόλοιπα, καθένα κατά προθεσμία. Χωρίς ορατό σύνορο, η σειρά φαίνεται τυχαία — «γιατί αυτό που λήγει σε δέκα μέρες είναι πάνω από εκείνο που έληξε χθες;». Είναι ΣΗΜΑΔΙ, όχι επικεφαλίδα: μικρό, γκρι, χωρίς φόντο, ώστε να μη διεκδικεί τη θέση μιας γραμμής δουλειάς σε κουτί έξι γραμμών. */ .qsplit{ font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:.3rem .8rem .15rem; border-bottom:1px solid var(--line); background:#FAFCFD; } /* ── ΕΚΠΡΟΘΕΣΜΟ ── Ήταν λεπτή γραμμή 3px στην άκρη — δεν φαινόταν, και ειδικά σε κινητό η αριστερή άκρη είναι εκτός οπτικού πεδίου όταν διαβάζεις το κείμενο. Τώρα: χοντρή γραμμή 5px ΚΑΙ απαλό κόκκινο φόντο σε όλη τη γραμμή. Το φόντο είναι ΠΟΛΥ αχνό (4% κόκκινο) επίτηδες: με είκοσι εκπρόθεσμες, ένα δυνατό κόκκινο κάνει τη λίστα αδιάβαστη και σταματά να σημαίνει τίποτα — ό,τι κραυγάζει παντού δεν ακούγεται πουθενά. Αχνό φόντο + χοντρή άκρη δίνει αναγνώριση με τη ματιά χωρίς να πνίγει το κείμενο. Και η ημερομηνία μέσα στη γραμμή γίνεται έντονη: εκεί κοιτάς τελικά. */ /* 1-3 ημέρες: μόνο η άκρη, χωρίς φόντο. Είναι απλώς «χθεσινό». */ .qrow.late{border-left:4px solid #E8C97A; padding-left:.6rem} /* 4-14 ημέρες: χοντρή άκρη ΚΑΙ φόντο σε όλη τη γραμμή — αυτό ζητήθηκε. */ .qrow.late-2{ border-left-width:6px; border-left-color:#D9A322; background:rgba(217,163,34,.07); } .qrow.late-2:hover{background:rgba(217,163,34,.13)} /* ── ΜΕΛΛΟΝΤΙΚΑ: ΜΠΛΕ, ΚΑΙ ΠΙΟ ΗΠΙΟ ── Το κόκκινο κοιτάει πίσω («χρωστάμε»), το μπλε μπροστά («κλεισμένο»). Δεν είναι προειδοποίηση, γι' αυτό η λωρίδα είναι πιο λεπτή και το φόντο πιο αχνό από τα κίτρινα: λέει «δεν είναι για σήμερα» χωρίς να τραβήξει το μάτι από αυτά που είναι. Ίδια όρια με την καθυστέρηση (3 ημέρες), ώστε το μάτι να μαθαίνει έναν κανόνα και όχι δύο. */ .qrow.soon{border-left:4px solid #A9C6DE; padding-left:.6rem} .qrow.soon-2{ border-left-width:6px; border-left-color:#2F6FA8; background:rgba(47,111,168,.055); } .qrow.soon-2:hover{background:rgba(47,111,168,.1)} /* Πάνω από 14 ημέρες: κόκκινο. Εδώ χάνονται πελάτες. */ .qrow.late-3{ border-left-width:6px; border-left-color:var(--accent); background:rgba(249,109,100,.085); } .qrow.late-3:hover{background:rgba(249,109,100,.15)} .qrow.late-3 .qtop{font-weight:600} .qmain{min-width:0; flex:1} .qtop{font-size:.84rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .qsub{font-size:.74rem; color:var(--muted); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.1rem} .qact{flex:none} .qact .seg button{padding:.3rem .5rem; font-size:.82rem} .qmore{display:block; padding:.55rem .9rem; font-size:.78rem; font-weight:600; color:var(--blue); text-decoration:none; border-top:1px solid var(--line)} .qmore:hover{background:#F7FAFC} /* ══════════════════════════════════════════════════════════════════ Η ΣΤΗΛΗ ΤΩΝ ΕΡΓΩΝ ΣΤΟΝ ΠΙΝΑΚΑ CRM ΓΙΑΤΙ ΣΤΗΛΗ ΚΑΙ ΟΧΙ ΠΕΜΠΤΟ ΚΟΥΤΙ: το ύψος είναι μετρημένο (βλ. σχόλιο πιο πάνω — 4 κουτιά × 6 γραμμές χωράνε ίσα-ίσα στα ~820px). Ένα πέμπτο κουτί από κάτω θα έσπρωχνε τη σελίδα σε scroll, και ο πίνακας που θέλει scroll δεν είναι πίνακας: γίνεται λίστα που κανείς δεν κατεβαίνει. Η στήλη πιάνει ΚΑΙ ΤΙΣ ΔΥΟ σειρές στα δεξιά: το 2×2 μένει ανέπαφο, το συνολικό ύψος δεν αλλάζει ούτε κατά ένα pixel, και τα έργα αποκτούν χώρο που δεν τον πήραν από κανέναν — μόνο πλάτος. ══════════════════════════════════════════════════════════════════ */ .quads.rail{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.55fr)} .quads.rail > .prjrail{grid-column:3; grid-row:1 / span 2; align-self:stretch} /* Κάτω από 1400px η τρίτη στήλη θα στένευε τα κουτιά μέχρι να μη διαβάζεται η επωνυμία. Εκεί τα έργα πέφτουν από κάτω, πλήρους πλάτους: το scroll είναι προτιμότερο από τέσσερις στήλες κειμένου που κόβεται. */ @media (max-width:1400px){ .quads.rail{grid-template-columns:repeat(2, minmax(0,1fr))} .quads.rail > .prjrail{grid-column:1 / -1; grid-row:auto} } @media (max-width:900px){ .quads{grid-template-columns:minmax(0,1fr)} } /* Μία γραμμή ανά έργο: όνομα, πελάτης, μπάρα. Σφιχτή επίτηδες — η στήλη πρέπει να χωρέσει οκτώ χωρίς δικό της scroll. */ .prow{display:block; padding:.45rem .8rem; border-bottom:1px solid var(--line); text-decoration:none; color:inherit} .prow:last-child{border-bottom:0} .prow:hover{background:#F7FAFC} .prow .pn{font-size:.82rem; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .prow .pc{font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:.28rem} .prow .pb{display:flex; align-items:center; gap:.45rem} .ptrack{flex:1; height:6px; border-radius:3px; background:#E4EBF0; overflow:hidden} .pfill{height:100%; border-radius:3px; background:var(--blue,#2E8FD8); transition:width .2s} .pfill.full{background:var(--green,#16B378)} .pfill.warn{background:#D9A322} .ppct{font-size:.7rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; min-width:2.4rem; text-align:right} /* Το «τι έχω να κάνω εγώ εδώ» — η μόνη πληροφορία της στήλης που είναι εντολή και όχι κατάσταση, γι' αυτό ξεχωρίζει. */ .prow .pnext{font-size:.71rem; color:var(--muted); margin-top:.22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .prow.plate{border-left:4px solid var(--accent); padding-left:.6rem; background:rgba(249,109,100,.06)} .prow.plate:hover{background:rgba(249,109,100,.12)} .prow.pwait{border-left:4px solid #D9A322; padding-left:.6rem} /* Η κεφαλίδα της καρτέλας: όλη η ταυτότητα της καταχώρησης σε μία γραμμή, ώστε να μη χρειάζεται scroll για να δεις αν ο πελάτης έχει χρόνο. */ .crd-top{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-bottom:.9rem; padding-bottom:.7rem; border-bottom:1px solid var(--line)} .crd-when{font-size:.76rem; color:var(--muted); margin-left:auto; white-space:nowrap} .crd-hr{border:0; border-top:1px solid var(--line); margin:1rem 0} .crd-foot{display:flex; gap:.5rem; margin-top:.4rem; padding-top:.8rem; border-top:1px solid var(--line)} /* Το σώμα του email του πελάτη, απομονωμένο. Λευκό φόντο και πλαίσιο ώστε να φαίνεται ότι είναι ΞΕΝΟ περιεχόμενο και όχι δικό μας UI. */ /* ΥΨΟΣ ΚΑΤΑ ΤΗΝ ΟΘΟΝΗ, όχι σταθερό: σε 1080p το 19rem έδειχνε το ένα τρίτο ενός συνηθισμένου email και ο χειριστής κυλούσε μέσα σε κουτί μέσα σε κουτί. Το ζητούμενο είναι να διαβάζεται το αίτημα ΤΟΥ ΠΕΛΑΤΗ. */ .mailview{width:100%; height:clamp(19rem, 46vh, 34rem); border:1px solid var(--line); border-radius:9px; background:#fff; display:block; margin-bottom:.55rem} /* Αποτελέσματα αναζήτησης πελάτη. Grid ώστε το υπόλοιπο χρόνου να στοιχίζεται σε στήλη — εκεί πέφτει το μάτι για να ξεχωρίσει τον σωστό ομώνυμο. */ .custlist{max-height:14rem; overflow-y:auto; border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:.45rem} .custlist button{display:grid; grid-template-columns:minmax(0,1fr) 4.5rem; width:100%; text-align:left; appearance:none; border:0; cursor:pointer; background:#fff; font:inherit; padding:.42rem .6rem; gap:0 .5rem; border-bottom:1px solid var(--line)} .custlist button:last-child{border-bottom:0} .custlist button:hover{background:#F3F7FA} .custlist .cn{font-size:.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .custlist .cm{font-size:.78rem; font-weight:700; text-align:right} .custlist .cs{grid-column:1 / -1; font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* 2. Ο μήνας — ένα κύριο νούμερο και τέσσερα που το εξηγούν. */ .hero-m{margin-bottom:1.1rem; border-left:3px solid var(--green, #0F7A55)} .hm-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr); gap:1.5rem; align-items:center} @media(max-width:56rem){.hm-grid{grid-template-columns:1fr; gap:1.1rem}} .hm-lbl{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700} .hm-val{font-size:2.6rem; font-weight:700; line-height:1.1; letter-spacing:-.03em; color:var(--green,#0F7A55); margin:.25rem 0} .hm-sub{font-size:.78rem; color:var(--muted); line-height:1.5} .hm-side{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem} @media(max-width:34rem){.hm-side{grid-template-columns:repeat(2,minmax(0,1fr))}} .hm-mini{ border:1px solid var(--line); border-radius:10px; padding:.6rem .7rem; background:#FBFDFF; display:flex; flex-direction:column; gap:.1rem; } .hm-mini b{font-size:1.35rem; font-weight:700; line-height:1} .hm-mini span{font-size:.72rem; color:var(--muted)} .hm-mini i{font-size:.68rem; color:var(--muted); font-style:normal} .hm-mini.good b{color:var(--green,#0F7A55)} .hm-mini.bad b{color:var(--accent)} /* 3. Βάθος */ .pl-sum{display:flex; gap:1.6rem; margin-bottom:.9rem; flex-wrap:wrap} .pl-sum b{display:block; font-size:1.2rem; font-weight:700; line-height:1.2} .pl-sum span{font-size:.72rem; color:var(--muted)} /* Ποιότητα: χαμηλά και ήσυχα — δεν είναι αριθμοί που κοιτάς κάθε πρωί. */ .q-card{margin-top:1.1rem; background:#FAFBFC} .q-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1rem} .q-item b{display:block; font-size:1.25rem; font-weight:700; line-height:1.2} .q-item span{font-size:.72rem; color:var(--muted)} .q-note{margin-top:.8rem; font-size:.78rem; line-height:1.65; color:var(--muted)} /* Μεταφορά εργασίας: οι συχνές απαντήσεις με ένα κλικ, με την ημερομηνία ορατή δίπλα — ώστε να μη χρειάζεται να την υπολογίσει κανείς στο μυαλό. */ .snooze{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.5rem} .sn{ border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; padding:.55rem .7rem; font-family:inherit; font-size:.84rem; font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:.15rem; text-align:left; transition:border-color .15s; } .sn:hover{border-color:var(--blue)} .sn span{font-size:.72rem; font-weight:400; color:var(--muted)} .sn.on{border-color:var(--navy,#0B2238); background:var(--navy,#0B2238); color:#fff} .sn.on span{color:rgba(255,255,255,.75)} /* Κάρτα-σύνδεσμος: ένα νούμερο σε πίνακα ελέγχου χωρίς προορισμό αναγκάζει τον χρήστη να ψάξει μόνος του πού βρίσκεται το βάθος του. */ a.card.link{text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s} a.card.link:hover{border-color:var(--blue); box-shadow:0 3px 14px rgba(4,80,137,.09); text-decoration:none} .card-h .go{margin-left:auto; font-size:.76rem; font-weight:600; color:var(--blue); white-space:nowrap} /* Μπάρα μαζικών ενεργειών: εμφανίζεται μόνο όταν υπάρχει επιλογή, ώστε να μη γεμίζει η οθόνη με κουμπιά που δεν μπορούν να πατηθούν. */ .bulkbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--navy,#0B2238); color:#fff; border-radius:10px; padding:.55rem .85rem; margin-bottom:.8rem; font-size:.85rem; } .bulkbar select{width:auto; min-width:12rem; padding:.3rem .5rem; font-size:.82rem; margin-left:auto} .kpi.good .val{color:var(--green)} /* ── Πίνακες ─────────────────────────────────────────────────────── */ table{width:100%; border-collapse:collapse; font-size:.86rem} thead th{ text-align:left; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:650; padding:.6rem .8rem; border-bottom:1px solid var(--line); background:#FBFDFF; position:sticky; top:0; z-index:1; white-space:nowrap; } tbody td{padding:.62rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr.click{cursor:pointer} tbody tr.click:hover{background:#F3F8FC} td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .tbl-wrap{overflow-x:auto; max-height:none} /* ── Στοιχεία ────────────────────────────────────────────────────── */ .pill{ display:inline-block; padding:.14rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; color:#fff; } .pill.soft{background:var(--line); color:var(--muted)} .tag{display:inline-block; padding:.1rem .45rem; border-radius:5px; background:#EEF4F9; color:var(--muted); font-size:.72rem} .dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.35rem; vertical-align:middle} .btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; font-size:.85rem; font-family:inherit; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s,transform .1s; } .btn:hover{background:#F3F8FC; text-decoration:none} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff} .btn.primary:hover{background:var(--accent-hover)} .btn.ghost{background:transparent; border-color:transparent; color:var(--muted)} .btn.ghost:hover{background:#EEF4F9; color:var(--ink)} .btn.sm{padding:.3rem .6rem; font-size:.78rem} .btn:disabled{opacity:.5; cursor:default} label{display:block; font-size:.75rem; letter-spacing:.04em; color:var(--muted); margin-bottom:.25rem; font-weight:600} input,select,textarea{ width:100%; padding:.5rem .65rem; border:1px solid var(--line); border-radius:8px; font-size:.87rem; font-family:inherit; color:var(--ink); background:var(--surface); transition:border-color .15s,box-shadow .15s; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(46,143,216,.12); } /* Τα checkbox/radio ΔΕΝ είναι πεδία κειμένου. Ο παραπάνω κανόνας τους έκανε πλαίσια πλήρους πλάτους με padding και περίγραμμα — γι' αυτό «έπαιρναν όλη την οθόνη» στη λίστα ενοτήτων του SoftOne. */ input[type=checkbox],input[type=radio]{ width:1.05rem; height:1.05rem; min-width:1.05rem; flex:none; padding:0; border:0; border-radius:3px; background:none; accent-color:var(--blue-bright); cursor:pointer; vertical-align:middle; } input[type=radio]{border-radius:50%} input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:0 0 0 3px rgba(46,143,216,.2)} textarea{resize:vertical; min-height:4.5rem; line-height:1.55} .field{margin-bottom:.85rem} .row{display:grid; gap:.85rem} .row-2{grid-template-columns:1fr 1fr} .row-3{grid-template-columns:1fr 1fr 1fr} .row-4{grid-template-columns:1fr 1fr 1fr 1fr} /* ΑΛΛΟ ΟΝΟΜΑ, ΙΔΙΟ ΠΡΑΓΜΑ. Το crmact.js γράφει `row2` (χωρίς παύλα) σε ~10 σημεία και δεν αντιστοιχούσε σε κανέναν κανόνα: τα δίστηλα πεδία του παραθύρου NDA έβγαιναν το ένα κάτω από το άλλο. Μπαίνει ως συνώνυμο αντί να αλλάξει η σήμανση, γιατί το αρχείο το δουλεύει και άλλος. ΕΚΚΡΕΜΕΙ: να γίνει `row row-2` στο crmact.js και να φύγει αυτός ο κανόνας. */ .row2{display:grid; gap:.85rem; grid-template-columns:1fr 1fr} @media(max-width:60rem){.row-4{grid-template-columns:1fr 1fr}} @media(max-width:40rem){.row-2,.row-3,.row-4,.row2{grid-template-columns:1fr}} /* Προειδοποίηση μέσα στη ροή — για ό,τι πρέπει να διαβαστεί πριν πατηθεί κουμπί, σε αντίθεση με το toast που φεύγει μόνο του. */ .warn{background:#4A3520; border:1px solid #7A5A2E; color:#F2D9A8; border-radius:.5rem; padding:.55rem .7rem; font-size:.85rem} /* Λόγος απώλειας μέσα στη λίστα leads. Κίτρινο και όχι κόκκινο: είναι μάθημα, όχι σφάλμα — και το κόκκινο στη λίστα διαβάζεται σαν κάτι που χάλασε. */ .lostwhy{ margin-top:.25rem; display:inline-block; font-size:.74rem; line-height:1.4; background:#FFF3D6; color:#8A6410; border-left:3px solid #D9A322; border-radius:0 5px 5px 0; padding:.15rem .45rem; } /* Τελευταία επικοινωνία μέσα στη λίστα leads. Ουδέτερο γκρι με γραμμή στα αριστερά: είναι ιστορικό, δεν πρέπει να τραβάει το μάτι πριν από το όνομα. Χωρίς αυτό, η λίστα δείχνει μόνο στάδια — και «πού το άφησα;» απαντιόταν ανοίγοντας κάθε καρτέλα χωριστά. */ .lastact{ margin-top:.25rem; font-size:.74rem; line-height:1.45; color:var(--muted); border-left:3px solid var(--line); padding:.05rem .45rem; max-width:34rem; } .lastact b{color:var(--ink); font-weight:600} .lastact .qt{color:var(--ink); opacity:.85} .lastact.stale{border-left-color:#D9A322} /* Κουμπί μεγέθυνσης πεδίου κειμένου. Δεξιά στην ετικέτα, διακριτικό — γίνεται ορατό στο hover του πεδίου, ώστε να μη γεμίσει η φόρμα εικονίδια. */ .xpand{float:right; appearance:none; border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:.9rem; line-height:1; padding:0 .1rem; opacity:.45} .field:hover .xpand, .xpand:focus{opacity:1; color:var(--blue)} /* Συνημμένα email: σύνδεσμοι OneDrive, όχι δικά μας αρχεία. Ορατοί ως κουμπιά — μια φωτογραφία που ο πελάτης έστειλε είναι συχνά ΟΛΗ η ουσία. */ .attlist{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem} .attlist a{display:inline-block; padding:.3rem .55rem; border-radius:6px; background:#EEF4F9; border:1px solid var(--line); color:var(--blue); font-size:.76rem; text-decoration:none; max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .attlist a:hover{background:var(--blue); color:#fff; border-color:var(--blue)} /* Εκτιμώμενος φόρτος ημέρας, στην κεφαλίδα της στήλης. Κάθε καταχώρηση CRM μετράει 15΄ — τάξη μεγέθους, όχι ακρίβεια. Πάνω από 6 ώρες κοκκινίζει. */ .dload{display:inline-block; margin-left:.35rem; padding:.02rem .3rem; border-radius:4px; font-size:.66rem; font-weight:700; vertical-align:1px; background:#E6F4EA; color:#137333} .dload.busy{background:#FFF3D6; color:#8A6410} .dload.full{background:#FDE8E6; color:#B3261E} /* Οι καταχωρήσεις SoftOne ξεχωρίζουν από τα δικά μας tasks: διακεκομμένο περίγραμμα, γιατί ο χρόνος τους είναι ΕΚΤΙΜΗΣΗ και όχι δεσμευμένο ραντεβού. */ .ev.k-s1_call, .ev.k-s1_email, .ev.k-s1_task, .ev.k-s1_job{ border-style:dashed; } /* ── Φόρτος ανά μήνα ──────────────────────────────────────────────── Κάθετες μπάρες με ΔΥΟ γραμμές ορίου: στόχος και ταβάνι. Ένα νούμερο δεν λέει αν είμαστε άνετα ή στα όρια — η απόσταση από τις δύο γραμμές το λέει. */ .loadgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(3.2rem,1fr)); gap:.5rem; align-items:end} .lm{text-align:center} .lbar{position:relative; height:6.5rem; background:#F1F5F8; border-radius:6px; overflow:hidden; border:1px solid var(--line)} .lfill{position:absolute; left:0; right:0; bottom:0; background:#BFD4E4; transition:height .3s} .lsure{position:absolute; left:0; right:0; bottom:0; background:var(--blue); transition:height .3s} .lm.tight .lfill{background:#F2D79B} .lm.tight .lsure{background:#D9A322} .lm.over .lfill{background:#F3B9B4} .lm.over .lsure{background:var(--accent)} /* Οι γραμμές ορίου πάνω από το γέμισμα, αλλιώς κρύβονται όταν γεμίσει. */ .lline{position:absolute; left:0; right:0; height:0; border-top:1px dashed #7C8B99} .lline.c{border-top:1px solid var(--accent)} .lv{font-size:.78rem; font-weight:700; margin-top:.25rem} .lm.over .lv{color:var(--accent)} .lm.tight .lv{color:#8A6410} .ll{font-size:.68rem; color:var(--muted); text-transform:capitalize} .loadkey{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.7rem; font-size:.72rem; color:var(--muted)} .loadkey i.k{display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.28rem; vertical-align:-1px} .loadkey i.sure{background:var(--blue)} .loadkey i.maybe{background:#BFD4E4} .loadkey i.lt{height:0; border-top:1px dashed #7C8B99; border-radius:0; vertical-align:2px} .loadkey i.lc{height:0; border-top:1px solid var(--accent); border-radius:0; vertical-align:2px} /* Επιβεβαίωση κοινοποίησης κάτω από το κείμενο του email. Πράσινο όταν υπάρχει, κίτρινο όταν λείπει — το «θα φύγει μόνο στον πελάτη» πρέπει να φαίνεται πριν πατηθεί η ολοκλήρωση, όχι μετά. */ .ccnote{margin-top:.35rem; padding:.35rem .55rem; border-radius:6px; font-size:.75rem; background:#E6F4EA; color:#137333} .ccnote.warn2{background:#FFF3D6; color:#8A6410} /* ── Τι έχει ο πελάτης (λύσεις/συνδρομές) ─────────────────────────── Grid και όχι table: με 10 προϊόντα και μακριά ονόματα, ο πίνακας ξεχειλίζει το παράθυρο. Οι στήλες είναι σταθερές δεξιά, το όνομα παίρνει ό,τι μένει. */ .soltbl{border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; margin-bottom:.55rem} .solrow{display:grid; grid-template-columns:minmax(0,1fr) 4.6rem 4.6rem 6.6rem; gap:.4rem; align-items:center; padding:.4rem .55rem; font-size:.78rem; border-bottom:1px solid var(--line)} .solrow:last-child{border-bottom:0} /* Λεπτή γραμμή αριστερά, όχι χρωματιστό φόντο: με 5 ληγμένα, το φόντο κάνει τη λίστα αδιάβαστη. */ .solrow.over{border-left:3px solid var(--accent); padding-left:.35rem} .solrow.soon{border-left:3px solid #D9A322; padding-left:.35rem} .solrow .sp{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .solrow .ss{display:block; font-weight:400; font-size:.7rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .solrow .sd{color:var(--muted); font-size:.72rem; text-align:right; white-space:nowrap} .solrow .st{text-align:right} @media (max-width:700px){ .solrow{grid-template-columns:minmax(0,1fr) 6.6rem} .solrow .sd{display:none} } /* Ένδειξη επεξήγησης δίπλα σε ετικέτα. Κύκλος με «?» — αναγνωρίσιμο, μικρό, και δεν κλέβει χώρο από το ίδιο το πεδίο. Το κείμενο μπαίνει σε title. */ .hint{ display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; border-radius:50%; cursor:help; vertical-align:-2px; background:#E4ECF2; color:var(--blue); font-size:.68rem; font-weight:700; border:1px solid #CFDCE6; user-select:none; } .hint:hover{background:var(--blue); color:#fff; border-color:var(--blue)} .req::after{content:" *"; color:var(--accent)} .filters{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem} .filters .field{margin:0; min-width:9rem} .filters .field.grow{flex:1; min-width:13rem} /* ── Φίλτρα με κουμπιά ───────────────────────────────────────────── Ένα drop-down κρύβει και τις επιλογές και το τι είναι επιλεγμένο. Με κουμπιά, ο χειριστής βλέπει με μια ματιά τι κοιτάει και το αλλάζει με ένα κλικ αντί για τρία. */ .seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff} .seg button{appearance:none; border:0; background:#fff; cursor:pointer; font:inherit; font-size:.8rem; padding:.42rem .8rem; color:var(--muted); border-left:1px solid var(--line); white-space:nowrap; line-height:1.35} .seg button:first-child{border-left:0} .seg button:hover{background:#F3F7FA; color:var(--ink)} .seg button.on{background:var(--ink); color:#fff; font-weight:600} .seg button.on.acc{background:var(--accent)} .seg button .n{opacity:.65; font-size:.72rem; margin-left:.28rem} .seg button.on .n{opacity:.8} .fgrp{display:flex; flex-direction:column; gap:.28rem} .fgrp>label{font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.02em} /* ── Κουμπιά γρήγορης επιλογής ───────────────────────────────────── Grid και ΟΧΙ flex: με flex το πλάτος κάθε κουμπιού ακολουθεί το μήκος του ονόματος, οπότε «Κέλλυ Αντώνογλου» βγαίνει διπλάσιο από «Ειρήνη» και η σειρά διαβάζεται στραβά. Με 1fr στήλες είναι όλα ίσα. */ .quick{display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:.4rem; margin-bottom:.85rem} .quick.q5{grid-template-columns:repeat(5, minmax(0,1fr))} /* Κουμπιά με ολόκληρη φράση («Δόθηκε οδηγία στον πελάτη»): σπάνε σε δεύτερη γραμμή αντί να κόβονται με αποσιωπητικά. Ένα κουμπί που δεν διαβάζεται δεν γλιτώνει χρόνο — τον χάνει. */ .quick.wrap{grid-template-columns:repeat(auto-fit, minmax(11rem,1fr))} .quick.wrap button{white-space:normal; text-overflow:clip; padding:.5rem .55rem; line-height:1.3; min-height:2.6rem} .quick button{appearance:none; cursor:pointer; font:inherit; font-size:.82rem; padding:.55rem .3rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); line-height:1.25; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .12s, border-color .12s, color .12s} .quick button:hover{background:#F3F7FA; border-color:#B9C9D6} .quick button.on{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600} .quick button .sm2{display:block; font-size:.68rem; opacity:.6; font-weight:400} .quick button.on .sm2{opacity:.75} @media (max-width:520px){ .quick{grid-template-columns:repeat(2, minmax(0,1fr))} .quick.q5{grid-template-columns:repeat(3, minmax(0,1fr))} } .empty{padding:2.5rem 1rem; text-align:center; color:var(--muted); font-size:.88rem} .empty .big{font-size:1.6rem; margin-bottom:.4rem; opacity:.5} /* ── Χωνί pipeline ───────────────────────────────────────────────── */ .funnel{display:flex; flex-direction:column; gap:.4rem} .fn-row{display:grid; grid-template-columns:9.5rem 1fr 4.5rem; align-items:center; gap:.6rem; font-size:.8rem} .fn-name{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .fn-bar{height:1.35rem; border-radius:5px; background:#EEF4F9; overflow:hidden} .fn-fill{height:100%; border-radius:5px; min-width:2px; transition:width .4s} .fn-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:600} /* ── Kanban ──────────────────────────────────────────────────────── */ .kanban{display:flex; gap:.75rem; overflow-x:auto; padding-bottom:1rem; align-items:flex-start} .kcol{flex:0 0 15rem; background:#EEF4F9; border-radius:var(--r); padding:.6rem} .kcol-h{display:flex; justify-content:space-between; align-items:center; font-size:.76rem; font-weight:700; margin-bottom:.6rem; padding:0 .2rem} .kcol-h .n{background:var(--surface); border-radius:999px; padding:.05rem .45rem; color:var(--muted); font-size:.72rem} .kcard{ background:var(--surface); border-radius:8px; padding:.6rem .7rem; margin-bottom:.5rem; box-shadow:var(--shadow-sm); cursor:pointer; border-left:3px solid var(--line); transition:transform .12s, box-shadow .12s; } .kcard:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg)} .kcard .t{font-weight:650; font-size:.82rem; margin-bottom:.15rem} .kcard .m{font-size:.73rem; color:var(--muted)} /* Το pipeline χάνει το νόημά του με οριζόντιο scroll: υπάρχει για να βλέπεις ΟΛΗ την εικόνα μαζί. Όταν τα στάδια με περιεχόμενο χωράνε στην οθόνη, μοιράζονται τον χώρο· το scroll επιστρέφει μόνο αν είναι πραγματικά πολλά. */ .kanban.fit{overflow-x:visible} .kanban.fit .kcol{flex:1 1 0; min-width:0} .kcol-sum{font-size:.72rem; color:var(--muted); padding:0 .2rem .45rem; font-weight:600} .kcol-empty{font-size:.75rem; color:var(--muted); padding:.4rem .2rem} .kcard.late{box-shadow:inset 0 0 0 1.5px rgba(249,109,100,.5)} .kcard .m b{color:var(--ink); font-weight:700} /* ── Πλαϊνή καρτέλα ──────────────────────────────────────────────── */ .drawer-bg{ position:fixed; inset:0; background:rgba(11,34,56,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; } .drawer-bg.on{opacity:1; pointer-events:auto} .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(46rem,100%); background:var(--bg); transform:translateX(100%); transition:transform .25s cubic-bezier(.22,.61,.36,1); z-index:41; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); } /* Οι προσφορές έχουν έξι καρτέλες, πίνακες γραμμών και φάσεις. Στα 46rem οι καρτέλες κυλούσαν οριζόντια και οι πίνακες δεν χωρούσαν. Ξεχωριστή κλάση ώστε να μη μεγαλώσουν και τα υπόλοιπα συρτάρια που δεν το χρειάζονται. */ .drawer.xl{width:min(78rem,100%)} .drawer.on{transform:none} .drawer-h{ padding:1rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; } .drawer-h h2{margin:0 0 .2rem; font-size:1.05rem; font-weight:700} .drawer-b{flex:1; overflow-y:auto; padding:1.15rem 1.25rem 3rem} /* ΑΝΑΔΙΠΛΩΣΗ και όχι οριζόντιο scroll: μια καρτέλα που πρέπει να την κυλήσεις για να τη βρεις, δεν υπάρχει. Καλύτερα δύο σειρές. */ .tabs{display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1rem} .tab{ padding:.5rem .85rem; font-size:.83rem; font-weight:600; color:var(--muted); border:0; background:none; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; } .tab.on{color:var(--ink); border-bottom-color:var(--accent)} .tl{list-style:none; margin:0; padding:0} .tl li{position:relative; padding:0 0 1rem 1.4rem; border-left:2px solid var(--line)} .tl li:last-child{border-left-color:transparent; padding-bottom:0} .tl li::before{ content:""; position:absolute; left:-.42rem; top:.3rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--blue-bright); border:2px solid var(--bg); } .tl .when{font-size:.72rem; color:var(--muted)} .tl .what{font-size:.85rem} .tl .who{font-size:.72rem; color:var(--muted)} /* ── Ειδοποιήσεις & modal (ΟΧΙ native dialogs) ───────────────────── */ .toast-wrap{position:fixed; bottom:1.25rem; right:1.25rem; z-index:60; display:flex; flex-direction:column; gap:.5rem} .toast{ background:var(--navy); color:var(--on-dark); padding:.7rem 1rem; border-radius:9px; font-size:.85rem; box-shadow:var(--shadow-lg); max-width:22rem; animation:slidein .22s cubic-bezier(.22,.61,.36,1); } .toast.err{background:#8A2F2A} .toast.ok{background:#0F7A55} @keyframes slidein{from{transform:translateX(1rem); opacity:0}to{transform:none; opacity:1}} /* Λιγότερο περιθώριο γύρω από το παράθυρο: με 1,25rem σε κάθε πλευρά, τα ευρύτερα παράθυρα έχαναν 40px που τα χρειάζονται για το κείμενο. */ .modal-bg{ position:fixed; inset:0; background:rgba(11,34,56,.5); display:flex; align-items:center; justify-content:center; padding:.75rem; z-index:70; } .modal{background:var(--surface); border-radius:var(--r-lg); width:min(43rem,100%); box-shadow:var(--shadow-lg)} /* Η καρτέλα CRM: το μήνυμα του πελάτη, τα τρία κείμενα και οι αναζητήσεις δεν διαβάζονται σε στενό παράθυρο. Ύψος με όριο και δικό του scroll, ώστε τα κουμπιά αποθήκευσης να μένουν πάντα ορατά κάτω. ΠΛΑΤΟΣ, ΔΥΟ ΓΥΡΟΙ +20%: 64 -> 78 -> 94rem, 40 -> 48 -> 58rem, 30 -> 36 -> 43rem. Το 94rem είναι ~1.500px, που σε οθόνη 1920 αφήνει ακόμη περιθώριο· το min(...,100%) κρατά τα μικρότερα ασφαλή χωρίς οριζόντιο scroll. Το ζητούμενο είναι να διαβάζεται το κείμενο ΤΟΥ ΠΕΛΑΤΗ χωρίς να κόβεται σε στενή κολόνα. */ .modal.xl{width:min(94rem,100%)} .modal.mid{width:min(58rem,100%)} /* Κάθε παράθυρο κρατά τα κουμπιά του ορατά: το σώμα κάνει δικό του scroll αντί να ξεφεύγει το παράθυρο κάτω από την οθόνη. */ /* Το 1,5rem είναι το διπλό περιθώριο του .modal-bg — πρέπει να συμβαδίζουν, αλλιώς το παράθυρο ξεφεύγει ή αφήνει κενό κάτω. */ .modal{display:flex; flex-direction:column; max-height:calc(100vh - 1.5rem)} .modal-b{overflow-y:auto; flex:1} .modal-h{padding:1rem 1.25rem .35rem; font-weight:700; font-size:1rem} .modal-b{padding:.35rem 1.25rem 1rem; color:var(--muted); font-size:.87rem} .modal-f{padding:.75rem 1.25rem 1.15rem; display:flex; gap:.5rem; justify-content:flex-end} /* Δύο στήλες μέσα στην πλατιά καρτέλα: αριστερά το ΤΙ ΕΓΙΝΕ (μήνυμα, κείμενα), δεξιά το ΤΙ ΚΑΝΩ (ανάθεση, ημερομηνίες, σημειώσεις). Σε στενή οθόνη πέφτουν η μία κάτω από την άλλη. */ /* Η ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ ΠΑΙΡΝΕΙ ΠΕΡΙΣΣΟΤΕΡΟ: εκεί ζει το κείμενο του πελάτη, που είναι το μόνο που πρέπει να διαβαστεί ολόκληρο. Η δεξιά είναι πεδία σταθερού πλάτους — δεν κερδίζει τίποτα από επιπλέον χώρο. */ .crd-cols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0 1.25rem; align-items:start} @media (max-width:900px){ .crd-cols{grid-template-columns:minmax(0,1fr)} } /* ── Ζώνες ─────────────────────────────────────────────────────────── Χωρίς ομαδοποίηση, η καρτέλα είναι 12 πεδία στη σειρά και το μάτι δεν ξέρει πού να πάει. Κάθε ζώνη απαντά σε ΜΙΑ ερώτηση: ποιος το παίρνει, πότε γίνεται, τι γράφουμε. Απαλή σκιά και όχι έντονο περίγραμμα: πρέπει να ξεχωρίζουν ομάδες, όχι να μοιάζει κουτί μέσα σε κουτί. */ .zone{background:#fff; border:1px solid var(--line); border-radius:11px; padding:.75rem .85rem .3rem; margin-bottom:.8rem; box-shadow:0 1px 3px rgba(11,34,56,.05), 0 1px 1px rgba(11,34,56,.03)} .zone > .zh{display:flex; align-items:center; gap:.45rem; margin:-.1rem 0 .6rem; font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)} .zone > .zh::before{content:''; width:3px; height:.85rem; border-radius:2px; background:var(--blue); flex:none} .zone > .zh .zn{margin-left:auto; text-transform:none; letter-spacing:0; font-weight:400; font-size:.72rem} .zone .field:last-child{margin-bottom:.55rem} .zone .quick{margin-bottom:.7rem} .zone textarea{background:#FCFDFE} /* Η ζώνη που κρατά ξένο περιεχόμενο (το μήνυμα του πελάτη) φαίνεται διαφορετική από τις ζώνες όπου γράφουμε εμείς. */ .zone.read{background:#FAFCFD} /* Κείμενο ΠΡΟΣ ΑΝΑΓΝΩΣΗ, όχι πεδίο φόρμας. Τυλίγεται, μεγαλώνει όσο χρειάζεται και κυλά μόνο αν ξεπεράσει λογικό ύψος — αντί να στριμώχνεται σε δύο σειρές textarea με δικό του scrollbar. */ .readtext{background:#fff; border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; font-size:.87rem; line-height:1.6; color:var(--ink,#26323C); white-space:pre-wrap; word-break:break-word; max-height:16rem; overflow-y:auto} .readtext.int{background:#F2F6F9; color:#3F5262} .zone.read > .zh::before{background:var(--muted)} .zone.act > .zh::before{background:var(--green, #0F7A55)} /* Ζώνη που ζητάει ενέργεια πριν προχωρήσεις. Κίτρινο και όχι σκούρο: πρέπει να τραβάει το μάτι, όχι να κυριαρχεί στην οθόνη. */ .zone.alert{background:#FFFBF0; border-color:#E8C97A} .zone.alert > .zh{color:#8A6410} .zone.alert > .zh::before{background:#D9A322} .loading{padding:2.5rem; text-align:center; color:var(--muted); font-size:.85rem} .spin{ display:inline-block; width:1.1rem; height:1.1rem; border:2px solid var(--line); border-top-color:var(--blue-bright); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-.2rem; margin-right:.4rem; } @keyframes sp{to{transform:rotate(360deg)}} /* ── Κινητό ────────────────────────────────────────────────────────── ΤΟ ΠΡΟΒΛΗΜΑ ΠΟΥ ΛΥΘΗΚΕ: το μενού γινόταν οριζόντια λωρίδα που κυλούσε. Δούλευε όσο ήταν επίπεδη λίστα συνδέσμων· τη στιγμή που μπήκαν πτυσσόμενες ενότητες έπαψε να λειτουργεί — οι υποσελίδες άνοιγαν ως κατακόρυφο πάνελ μέσα σε οριζόντια μπάρα ύψους 3rem, δηλαδή πουθενά. Στην πράξη, από κινητό δεν υπήρχε τρόπος να φτάσεις στις μισές σελίδες. ΛΥΣΗ: συρόμενο μενού (off-canvas) με κουμπί ☰, όπως το περιμένει ο καθένας. ΤΟ ΙΔΙΟ ΑΚΡΙΒΩΣ MARKUP με τον υπολογιστή — καμία δεύτερη υλοποίηση του μενού. Ό,τι προστεθεί εκεί, εμφανίζεται αυτόματα και εδώ. */ /* ── Μπάρα «νέα έκδοση» ── Κάτω και όχι πάνω: πάνω θα σκέπαζε την μπάρα του κινητού· κάτω είναι και πιο κοντά στον αντίχειρα. Πάνω από όλα (z-index 200) γιατί αν εμφανιστεί πίσω από παράθυρο, δεν πατιέται ποτέ. */ .updbar{ position:fixed; left:0; right:0; bottom:0; z-index:200; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; background:var(--navy); color:var(--on-dark); padding:.7rem 1rem; padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); font-size:.85rem; box-shadow:0 -2px 14px rgba(0,0,0,.25); } .updbar span{flex:1; min-width:9rem} .updbar button{ font:inherit; font-size:.85rem; font-weight:600; border:0; border-radius:8px; padding:.5rem 1rem; cursor:pointer; min-height:2.5rem; } .updbar .upd-go{background:var(--accent); color:#fff} .updbar .upd-x{background:rgba(255,255,255,.14); color:var(--on-dark); padding:.5rem .8rem} .nav-user .lm-ver{ display:block; margin-top:.35rem; font-size:.72rem; opacity:.6; cursor:pointer; } /* ── Πρόσκληση εγκατάστασης ── Κάτω, όπως και η μπάρα ενημέρωσης, αλλά ΠΙΟ ΧΑΜΗΛΗ προτεραιότητα (z-index 190 έναντι 200): αν τύχει να συνυπάρξουν, η ενημέρωση προηγείται — μια κολλημένη έκδοση είναι πρόβλημα, μια μη εγκατεστημένη εφαρμογή είναι απλώς χαμένη ευκαιρία. */ .instbar{ position:fixed; left:0; right:0; bottom:0; z-index:190; display:flex; align-items:center; gap:.8rem; background:#12304C; color:var(--on-dark); padding:.75rem 1rem; padding-bottom:calc(.75rem + env(safe-area-inset-bottom)); box-shadow:0 -2px 14px rgba(0,0,0,.25); } .instbar .ib-txt{flex:1; min-width:0; line-height:1.45} .instbar .ib-txt b{display:block; font-size:.88rem} .instbar .ib-txt span{display:block; font-size:.78rem; opacity:.82; margin-top:.15rem} .instbar button{ font:inherit; font-size:.85rem; font-weight:600; border:0; border-radius:8px; cursor:pointer; min-height:2.5rem; white-space:nowrap; } .instbar .ib-go{background:var(--accent); color:#fff; padding:.5rem 1rem} .instbar .ib-x{background:rgba(255,255,255,.14); color:var(--on-dark); padding:.5rem .8rem} /* ΣΕ ΥΠΟΛΟΓΙΣΤΗ ΔΕΝ ΥΠΑΡΧΟΥΝ — και η δήλωση μπαίνει ΠΡΙΝ το media query. Ήταν γραμμένη μετά, οπότε νικούσε (ίδια ειδικότητα, μεταγενέστερη) και έκρυβε την μπάρα ΚΑΙ στο κινητό: το ☰ υπήρχε στο DOM, με σωστά στυλ, και δεν εμφανιζόταν ποτέ. Η σειρά στο CSS δεν είναι αισθητική — είναι λογική. */ .topbar, .nav-scrim{display:none} @media(max-width:52rem){ .shell{flex-direction:column} /* Η μπάρα με το ☰. Sticky ώστε το μενού να είναι πάντα ένα άγγιγμα μακριά, ακόμη και στο κάτω μέρος μιας μεγάλης λίστας. */ .topbar{ display:flex !important; align-items:center; gap:.7rem; position:sticky; top:0; z-index:60; background:var(--navy); color:var(--on-dark); padding:.55rem .7rem; padding-top:calc(.55rem + env(safe-area-inset-top)); box-shadow:0 1px 6px rgba(0,0,0,.22); } .burger{ font:inherit; font-size:1.35rem; line-height:1; background:none; border:0; color:var(--on-dark); cursor:pointer; padding:.35rem .5rem; border-radius:8px; /* 44px στόχος αφής — κάτω από αυτό αστοχεί ο αντίχειρας. */ min-width:2.75rem; min-height:2.75rem; } .burger:active{background:rgba(255,255,255,.12)} .topbar .tb-logo{height:1.15rem; display:block} .topbar .tb-title{ font-size:.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.92; } /* Το μενού γίνεται συρτάρι. Μένει στο DOM (δεν κρύβεται με display:none) ώστε να δουλεύει η μετάβαση και να μη χάνεται η θέση κύλισης. */ .nav{ position:fixed; top:0; left:0; bottom:0; width:min(19rem, 84vw); flex:none; height:100%; z-index:80; overflow-y:auto; transform:translateX(-100%); transition:transform .24s ease; padding-top:env(safe-area-inset-top); box-shadow:2px 0 18px rgba(0,0,0,.3); } .shell.nav-open .nav{transform:translateX(0)} /* Σκίαση: κλείνει με άγγιγμα οπουδήποτε — η κίνηση που κάνουν όλοι. */ .nav-scrim{ display:block !important; position:fixed; inset:0; z-index:70; background:rgba(4,12,20,.5); opacity:0; pointer-events:none; transition:opacity .24s ease; } .shell.nav-open .nav-scrim{opacity:1; pointer-events:auto} /* Μέσα στο συρτάρι το μενού είναι ΚΑΝΟΝΙΚΟ κατακόρυφο — ίδιο με τον υπολογιστή, οπότε οι πτυσσόμενες ενότητες δουλεύουν όπως πρέπει. */ .nav-links{display:block; padding:.5rem 0; flex:1} .nav a{padding:.7rem 1.25rem} .nav-sub a{padding:.55rem 1.25rem .55rem 3rem} .nav-user{padding:.9rem 1.25rem; padding-bottom:calc(.9rem + env(safe-area-inset-bottom))} .main{padding:1rem .9rem 3rem} /* Το σώμα δεν κυλάει πίσω από ανοιχτό συρτάρι: το «χάθηκε η θέση μου» είναι ο συνηθέστερος τρόπος να μισήσει κανείς ένα μενού κινητού. */ body.nav-locked{overflow:hidden} } /* Πόσο περιμένει ένα lead — κάτω από την ταμπέλα σταδίου. */ .waitd{font-size:.72rem; margin-top:.2rem; line-height:1.3} /* Η εντολή εγκατάστασης στο υποσέλιδο του μενού. Λίγο πιο έντονη από τους διπλανούς συνδέσμους: είναι πρόταση, όχι ρύθμιση. */ #lm-inst{font-weight:600} /* ── ΤΟ ΚΟΥΜΠΙ «ΔΩΡΕΑΝ» ΣΤΟ ΚΛΕΙΣΙΜΟ ── ΔΙΑΚΡΙΤΙΚΟ ΩΣΠΟΥ ΠΑΤΗΘΕΙ. Η χρέωση είναι ο κανόνας· ένα κουμπί που φωνάζει «δώσ' το τζάμπα» δίπλα στα λεπτά είναι πρόταση, όχι εργαλείο. Μόλις όμως πατηθεί, γίνεται πράσινο και ολοφάνερο: ο χειριστής πρέπει να βλέπει με το μάτι, χωρίς να διαβάσει, ότι αυτό το δελτίο δεν θα χρεώσει. */ .zone .lnk{appearance:none; background:none; border:0; padding:.15rem 0; cursor:pointer; font:inherit; font-size:.82rem; font-weight:600; color:var(--blue)} .zone .lnk:hover{text-decoration:underline} .zone .lnk.on{color:#137333} /* ── ΟΙ ΠΑΡΑΛΗΠΤΕΣ ΤΟΥ ΕΓΓΡΑΦΟΥ ── Λίστα με τσεκ και όχι πεδίο κειμένου. Ο πελάτης έχει σχεδόν πάντα δύο-τρεις διευθύνσεις σε δύο πεδία της καρτέλας SoftOne, και το παλιό μονό `type="email"` δεν δεχόταν καν το «;» που τις χωρίζει. */ .dests{display:flex; flex-direction:column; gap:.1rem; margin-bottom:.7rem} .dest{display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.3rem .1rem; border-radius:6px} .dest:hover{background:#F5F8FA} .dest input{width:auto; margin:0; flex:0 0 auto} .dest .a{font-size:.86rem; word-break:break-all} /* Το λογιστήριο σημαίνεται: καμιά φορά είναι η μόνη διεύθυνση που απαντά, άλλες φορές είναι εξωτερικός λογιστής που δεν υπογράφει τίποτα. */ .dest .t{font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.08rem .36rem; border-radius:5px; background:#FFF3E0; color:#8A5100; white-space:nowrap} /* ── «ΝΕΑ ΚΛΗΣΗ» ΣΤΗ ΓΡΑΜΜΗ ΦΙΛΤΡΩΝ ── Σπρώχνεται στη δεξιά άκρη με margin-inline-start:auto, ώστε να μη μοιάζει με φίλτρο. Είναι πράξη, όχι επιλογή προβολής — και τα δύο είδη σε μία σειρά μπερδεύονται αν κάθονται κολλητά. */ .filters .fgrp-end{margin-inline-start:auto; align-self:flex-end} /* ── ΑΠΟΤΕΛΕΣΜΑΤΑ ΑΝΑΖΗΤΗΣΗΣ ΠΕΛΑΤΗ ── Λίστα κουμπιών και όχι σε κάθε γραμμή γεμίζει τη λίστα με πλαίσια και βέλη· εδώ το περίγραμμα εμφανίζεται στο hover, όπως στην ανάθεση. */ .pri-sel{appearance:none; background:transparent; border:1px solid transparent; border-radius:6px; font:inherit; font-size:.74rem; color:var(--muted); padding:.1rem .3rem; cursor:pointer; max-width:6.5rem} .pri-sel:hover{border-color:var(--line); background:#fff; color:var(--ink,#26323C)} .pri-sel.hot{background:#FDE8E6; border-color:#F0B4AE; color:#B3261E; font-weight:700} .pri-sel:disabled{opacity:.5} .pri{display:inline-block; font-size:.72rem; padding:.05rem .4rem; border-radius:999px; white-space:nowrap; line-height:1.5} .pri.p4{background:#FDE8E6; color:#B3261E; font-weight:700; letter-spacing:.03em} /* Το «δεν τέθηκε» είναι μια τελεία: υπάρχει για να πατηθεί, όχι να διαβαστεί. Μια λέξη εκεί θα διεκδικούσε προσοχή που δεν της ανήκει. */ .pri.p0{background:#F1F4F7; color:#9FB0BF; padding:.05rem .32rem} /* ── ΤΟ ΕΠΕΙΓΟΝ ΣΗΜΑΙΝΕΙ ΟΛΟΚΛΗΡΗ ΤΗ ΓΡΑΜΜΗ ───────────────────────────── Μια ετικέτα σε μία στήλη χάνεται σε λίστα δέκα στηλών: ο χειριστής που σαρώνει κάθετα ψάχνει ΓΡΑΜΜΕΣ, όχι κελιά. ΛΩΡΙΔΑ ΚΑΙ ΟΧΙ ΚΟΚΚΙΝΟ ΦΟΝΤΟ. Γεμάτο κόκκινο κάνει τη γραμμή να μοιάζει με σφάλμα και κουράζει σε τρεις γραμμές. Η λωρίδα φαίνεται από την άκρη του ματιού και μένει ήσυχη όταν πλησιάσεις. */ /* ΤΟ ΠΙΟ ΕΝΤΟΝΟ ΠΟΥ ΚΡΑΤΑ ΤΑ ΚΕΙΜΕΝΑ ΑΝΑΓΝΩΣΙΜΑ. Μετρήθηκε: #FBDCD9 δίνει 4.7:1 στο σβηστό γκρι — μόλις πάνω από το όριο 4.5:1. Πιο σκούρο ροζ κάνει τις ημερομηνίες και τα δευτερεύοντα δυσανάγνωστα, και τότε η γραμμή τραβάει το μάτι αλλά δεν διαβάζεται. */ tr.row-urg > td{background:#FBDCD9} tr.row-urg > td:first-child{box-shadow:inset 4px 0 0 #B3261E} tr.row-urg:hover > td{background:#F8CDC8} /* Ο πελάτης κόκκινος και έντονος: είναι το πρώτο που διαβάζει το μάτι στη γραμμή, και το μόνο που χρειάζεται για να αναγνωριστεί το επείγον. */ tr.row-urg .mono{color:#8A1D17} tr.row-urg td:nth-child(6) > div:first-child{color:#B3261E} /* Στον πίνακα CRM η κάρτα έχει ήδη λωρίδα καθυστέρησης· το επείγον ΠΡΟΣΤΙΘΕΤΑΙ με έντονο περίγραμμα, δεν την αντικαθιστά — ένα επείγον που κάθεται δέκα μέρες είναι χειρότερο και από τα δύο. */ /* Στον πίνακα CRM η κάρτα κοκκινίζει ολόκληρη — εκεί οι γραμμές είναι λίγες και μεγάλες, οπότε αντέχει περισσότερο χρώμα από τη λίστα. */ .qrow.urg{border-color:#E4948B; background:#FBDCD9} .qrow.urg:hover{background:#F8CDC8} .qrow.urg .qtop b{color:#8A1D17} .qrow.urg .qtop b::before{content:'⚑ '; color:#B3261E} /* Το «ΕΠΕΙΓΟΝ» στα γρήγορα κουμπιά: κόκκινο μόνο όταν επιλεγεί. Πάντα κόκκινο, θα το πατούσε κανείς κατά λάθος επειδή τραβάει το μάτι. */ /* ── Η ΛΩΡΙΔΑ ΦΟΡΤΟΥ ── Μία γραμμή κλειστή, ~34px. Ο πίνακας CRM είναι οθόνη δράσης: ό,τι μπαίνει πάνω από τα αιτήματα πρέπει να δικαιολογεί κάθε pixel. */ .ldwrap{border:1px solid var(--line); border-radius:10px; background:#fff; margin-bottom:.8rem; overflow:hidden} .ldbar-h{display:flex; align-items:center; gap:.4rem; width:100%; border:0; background:none; padding:.4rem .7rem; cursor:pointer; text-align:left; font:inherit; color:inherit; overflow-x:auto; white-space:nowrap} .ldbar-h:hover{background:#FAFBFC} .ldttl{font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-right:.2rem; flex:none} .ldchip{font-size:.78rem; padding:.1rem .45rem; border-radius:99px; background:#EEF3F7; color:#2B3138; flex:none} .ldchip b{margin-left:.25rem; color:#1E7A45} .ldchip.f{background:#FBE9E7} .ldchip.f b{color:#B3261E} .ldchip.me{outline:1px solid #B9CFE0} .ldmeta{margin-left:auto; font-size:.72rem; color:var(--muted); flex:none; padding-left:.5rem} .ldcar{font-size:.8rem; color:var(--muted); flex:none} .ldbody{border-top:1px solid var(--line); padding:.5rem .7rem .6rem} .ldbody .sub{font-size:.72rem; color:var(--muted); margin-top:.4rem} table.ldt{width:100%; border-collapse:collapse; font-size:.8rem} table.ldt td{padding:.22rem .4rem; border-bottom:1px solid #F4F6F8; vertical-align:middle} table.ldt tr:last-child td{border-bottom:0} table.ldt tr.me td{background:#F7FAFC} table.ldt td.nm{font-weight:600; white-space:nowrap; width:1%} table.ldt td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums} table.ldt td.t{width:1%} table.ldt td.bar{width:22%; min-width:3.5rem; position:relative} table.ldt td.bad{color:#B3261E; font-weight:600} .ldt .sm2{font-size:.68rem; color:var(--muted); font-weight:400; margin-left:.15rem} .ldt .full{color:#B3261E; font-weight:600; font-size:.74rem} .ldt .sm2.over{color:#B3261E; font-weight:700} .ldt td.bar::before{content:''; display:block; height:.42rem; border-radius:99px; background:#EDF0F2} .ldt .ld{position:absolute; left:.4rem; top:50%; transform:translateY(-50%); height:.42rem; border-radius:99px; max-width:calc(100% - .8rem)} .ldt .ld.good{background:#3F9E6A} .ldt .ld.warn{background:#D89A2E} .ldt .ld.bad{background:#C2453B} /* Η εβδομάδα: πέντε κελιά, σήμερα σημαδεμένο, οι περασμένες ξεθωριασμένες. Το ερώτημα είναι «τι μου μένει», όχι «τι πέρασε». */ .ldt td.wk{white-space:nowrap; width:1%} .ldd{display:inline-block; min-width:1.5rem; text-align:center; font-size:.6rem; color:var(--muted); line-height:1.1; padding:.1rem .1rem; border-radius:4px; margin-right:1px} .ldd b{display:block; font-size:.74rem; color:#98A2AC; font-weight:600} .ldd.has b{color:#2B3138} .ldd.past{opacity:.4} .ldd.now{background:#EEF3F7; outline:1px solid #B9CFE0} .quick button.urg.on{background:#B3261E; border-color:#B3261E; color:#fff} .quick.q3{grid-template-columns:repeat(3, minmax(0,1fr))} .quick.q4{grid-template-columns:repeat(4, minmax(0,1fr))} /* ── Η ΕΙΔΟΠΟΙΗΣΗ ΓΙΑ ΤΑ ΚΑΘΥΣΤΕΡΗΜΕΝΑ ── Ξεχωρίζει χωρίς να ουρλιάζει: ο χειριστής τη βλέπει κάθε πρωί που έχει ουρά, και ό,τι φωνάζει καθημερινά παύει να ακούγεται. */ .lateb{display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; background:#FDF3F2; border:1px solid #F0C8C3; border-radius:10px; margin-bottom:.7rem} .lateb .lb-i{color:#B3261E; font-size:1rem; flex:none} .lateb .lb-t{font-size:.84rem; color:#5A2B27; flex:1} .lateb .btn{flex:none} @media (max-width:640px){ .lateb{flex-wrap:wrap} .lateb .lb-t{flex-basis:100%} }