/* ═══════════════════════════════════════════════════════════════════ eControl — BETA RESKIN (beta.html ΜΟΝΟ) ───────────────────────────────────────────────────────────────── Βασισμένο στο εγκεκριμένο prototype Γ «Πίνακας ελέγχου». Φωτεινό, ευάερο ύφος · κάρτες · status pills · accent teal. Φορτώνεται ΤΕΛΕΥΤΑΙΟ στο ώστε να υπερισχύει του inline CSS. ΔΕΝ αγγίζει κανένα ID/hook — μόνο εμφάνιση & θέση. ═══════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────── 1. ΠΑΛΕΤΑ — Θερμό (default '') = ζεστό κρεμ light. Όλο το app χρωματίζεται μέσω αυτών των μεταβλητών, οπότε η αλλαγή εδώ «ρετουσάρει» και τα inline styles. ──────────────────────────────────────────────── */ :root { --bg:#F7F5F1; --bg2:#F1EDE6; --bg3:#EAE5DC; --surface:#FFFFFF; --surface2:#F5F1EA; --surface3:#EDE8DF; --border:#E9E4DA; --border2:#D9D2C4; --ink:#201E19; --ink2:#46423A; --ink3:#6E6960; --ink4:#9B958A; /* accent: ΤΟ ΙΔΙΟ μπλε με την κανονική εφαρμογή (Θερμό) — 02/07 */ --accent:#3b6fca; --accent-weak:#f0f4fb; --accent-text:#2f5cb0; --blue:#3b6fca; --blue-dim:rgba(59,111,202,.07); --blue-mid:rgba(59,111,202,.15); --blue-light:#f0f4fb; --blue-hover:#2f5cb0; --green:#16A34A; --green-dim:rgba(22,163,74,.09); --green-mid:rgba(22,163,74,.22); --green-light:#E7F6EE; --amber:#E08600; --amber-dim:rgba(224,134,0,.10); --amber-mid:rgba(224,134,0,.26); --amber-light:#FDF1DF; --red:#DC2626; --red-dim:rgba(220,38,38,.08); --red-mid:rgba(220,38,38,.20); --red-light:#FDECEC; --purple:#6D49C4; --purple-dim:rgba(109,73,196,.08); --purple-light:#F4F0FC; --r:10px; --r2:14px; --r3:12px; --shadow:0 1px 2px rgba(20,25,35,.04),0 4px 16px rgba(20,25,35,.05); --shadow2:0 4px 6px -1px rgba(20,25,35,.06),0 2px 8px -2px rgba(20,25,35,.05); --shadow3:0 8px 40px rgba(20,25,35,.16); } /* ── Κλασσικό — ψυχρό, καθαρό γκρι (η παλέτα του prototype Γ) ── Μόνο τα ουδέτερα διαφέρουν από το Θερμό· accent/status κοινά. */ [data-theme="classic"] { --bg:#F5F6F8; --bg2:#EFF1F4; --bg3:#E9ECF1; --surface:#FFFFFF; --surface2:#F1F3F6; --surface3:#E9ECF1; --border:#E7E9EE; --border2:#D6DAE1; --ink:#1B1F27; --ink2:#3F4757; --ink3:#5A6273; --ink4:#8A92A3; /* accent: το μπλε του Κλασσικού της κανονικής */ --accent:#2563eb; --accent-weak:#eff6ff; --accent-text:#1d4ed8; --blue:#2563eb; --blue-dim:rgba(37,99,235,.08); --blue-mid:rgba(37,99,235,.18); --blue-light:#eff6ff; --blue-hover:#1d4ed8; } /* ── Dark → ΙΔΙΟ με την κανονική εφαρμογή (slate, όχι έντονο μαύρο) — 02/07 ── */ [data-theme="dark"] { --bg:#0f172a; --bg2:#1e293b; --bg3:#293548; --surface:#1e293b; --surface2:#263040; --surface3:#2d3a4f; --border:#2d3a50; --border2:#374560; --ink:#f1f5f9; --ink2:#cbd5e1; --ink3:#64748b; --ink4:#475569; --accent:#3b82f6; --accent-weak:rgba(59,130,246,.12); --accent-text:#60a5fa; --blue:#3b82f6; --blue-dim:rgba(59,130,246,.12); --blue-mid:rgba(59,130,246,.22); --blue-light:rgba(59,130,246,.08); --blue-hover:#60a5fa; --green:#10b981; --green-dim:rgba(16,185,129,.1); --green-mid:rgba(16,185,129,.2); --green-light:rgba(16,185,129,.07); --amber:#f59e0b; --amber-dim:rgba(245,158,11,.1); --amber-mid:rgba(245,158,11,.2); --amber-light:rgba(245,158,11,.07); --red:#ef4444; --red-dim:rgba(239,68,68,.1); --red-mid:rgba(239,68,68,.18); --red-light:rgba(239,68,68,.07); --shadow:0 1px 3px rgba(0,0,0,.3); --shadow2:0 4px 12px rgba(0,0,0,.35); --shadow3:0 16px 40px rgba(0,0,0,.45); } /* ──────────────────────────────────────────────── 2. ΒΑΣΗ — τυπογραφία & γενικό αέρα ──────────────────────────────────────────────── */ body.beta { background: var(--bg); letter-spacing: -0.01em; } /* ──────────────────────────────────────────────── 3. TOPBAR — ψηλότερη, πιο καθαρή ──────────────────────────────────────────────── */ body.beta .topbar { height: 58px; padding: 0 20px; gap: 14px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; } /* το layout είχε ύψος με σκληρό calc — το κάνουμε ελαστικό ώστε να μη «σπάει» με το νέο ύψος topbar */ body.beta .layout { height: auto; flex: 1 1 auto; min-height: 0; } /* ── BETA: Επιλογέας Φακέλων — εμφανές κουμπί-dropdown ── */ body.beta #betaCaseSwitchBtn { align-items: center; gap: 9px; height: 40px; padding: 0 13px 0 8px; border-radius: var(--r); border: 1.5px solid var(--blue-mid); background: var(--accent-weak); color: var(--accent-text); font-family: var(--body); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; flex-shrink: 0; } body.beta #betaCaseSwitchBtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(59,111,202,.3); } body.beta #betaCaseSwitchBtn .bcs-ic { width: 27px; height: 27px; border-radius: 8px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; } body.beta #betaCaseSwitchBtn:hover .bcs-ic { background: rgba(255,255,255,.22); } body.beta #betaCaseSwitchBtn .bcs-chev { transition: transform .15s; } body.beta.beta-cases-open #betaCaseSwitchBtn { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--blue-mid); } body.beta.beta-cases-open #betaCaseSwitchBtn .bcs-ic { background: rgba(255,255,255,.22); } body.beta.beta-cases-open #betaCaseSwitchBtn .bcs-chev { transform: rotate(180deg); } /* ── BETA: κουμπί Σημειώσεων — icon-only, διακριτικό, με σχεδιασμένο ύφος ── */ body.beta #betaNotesBtn { align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 9px; border: 1px solid var(--amber-mid); background: var(--amber-light); color: var(--amber); cursor: pointer; transition: all .15s; flex-shrink: 0; } body.beta #betaNotesBtn span { display: none; } body.beta #betaNotesBtn svg { width: 14px; height: 14px; } body.beta #betaNotesBtn:hover { background: var(--amber); border-color: var(--amber); color: #fff; transform: scale(1.06); } /* ── BETA: Στοιχεία φακέλου στην topbar — καθαρά chips ── */ body.beta #chName { font-size: 14.5px !important; letter-spacing: -0.02em !important; } body.beta #chMeta { gap: 6px !important; margin-left: 2px; } body.beta #chMeta > span { font-family: var(--body) !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--ink2) !important; background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: 99px !important; padding: 3px 11px !important; letter-spacing: 0 !important; } body.beta #chMeta > span:first-child { font-family: var(--mono) !important; font-size: 11px !important; color: var(--accent-text) !important; background: var(--accent-weak) !important; border-color: transparent !important; } /* ──────────────────────────────────────────────── 4. SIDEBAR → DROPDOWN PANEL ΦΑΚΕΛΩΝ Ίδια στοιχεία & IDs (caseSearchInput, clientList) — απλώς «ζουν» πλέον μέσα σε αιωρούμενο panel. ──────────────────────────────────────────────── */ body.beta .sidebar { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); width: 680px; max-width: calc(100vw - 32px); max-height: min(76vh, 720px); z-index: 8990; display: none; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow3); overflow: hidden; transition: none; } body.beta.beta-cases-open .sidebar { display: flex; animation: betaMenuIn .16s ease; } @keyframes betaMenuIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%); } } /* Backdrop: σκοτεινιάζει ελαφρά το app ώστε να είναι σαφές ότι άνοιξε μενού */ body.beta.beta-cases-open::before { content: ""; position: fixed; inset: 0; background: rgba(18,22,30,.32); z-index: 8985; } /* Στοιχεία της παλιάς sidebar που δεν χρειάζονται στο dropdown («Αρχική»/«Νέος Φάκελος» υπάρχουν ήδη στην topbar) */ body.beta .sb-toggle, body.beta .sb-header, body.beta #sbBalls, body.beta #sbCollapsedNew, body.beta #stickyBtn { display: none !important; } /* Εξουδετέρωση της κατάστασης collapsed (δεν έχει νόημα σε dropdown) */ body.beta .sidebar.collapsed { width: 680px; } body.beta .sidebar.collapsed .client-list { display: block !important; } body.beta .sidebar.collapsed .sb-collapse-hide { display: block !important; } /* Κεφαλίδα dropdown — τίτλος + οδηγία, δεν αφήνει αμφιβολία τι είναι */ body.beta .beta-cases-hd { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; } body.beta .beta-cases-hd .bch-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-weak); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.beta .beta-cases-hd .bch-tx { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1; } body.beta .beta-cases-hd .bch-tx b { font-size: 13.5px; font-weight: 700; color: var(--ink); } body.beta .beta-cases-hd .bch-tx small { font-size: 11.5px; font-weight: 400; color: var(--ink3); } body.beta .bch-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent-text); background: var(--accent-weak); border-radius: 99px; padding: 4px 11px; white-space: nowrap; } body.beta .bch-count:empty { display: none; } /* Εικονίδιο μέσα στην αναζήτηση */ body.beta .beta-search .bs-ic { position: absolute; left: 23px; top: 50%; transform: translateY(-46%); color: var(--ink4); pointer-events: none; } body.beta .beta-search #caseSearchInput { padding-left: 36px !important; } /* Φίλτρο φάσης — γρήγορη εύρεση */ body.beta .beta-phase-filter { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; flex-shrink: 0; flex-wrap: wrap; } body.beta .bpf-lab { font-size: 11px; font-weight: 600; color: var(--ink4); margin-right: 2px; } body.beta .bpf { height: 26px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border2); background: var(--surface); color: var(--ink3); font-family: var(--body); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s; } body.beta .bpf:hover { border-color: var(--accent); color: var(--accent-text); } body.beta .bpf.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* Αναζήτηση μέσα στο dropdown — πιο άνετη */ body.beta #caseSearchInput { height: 40px; border-radius: var(--r) !important; font-size: 13px !important; padding: 8px 13px !important; } body.beta .sidebar > div[class="sb-collapse-hide"] { padding: 10px 14px 4px !important; } /* Λίστα φακέλων σε 2 στήλες — αξιοποιεί το πλάτος του panel */ body.beta .client-list { padding: 10px 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; align-content: start; } /* μήνυμα «δεν βρέθηκαν» (μοναδικό παιδί) απλώνει σε όλο το πλάτος */ body.beta .client-list > div:only-child { grid-column: 1 / -1; } /* ── Σειρές φακέλων (επιλογή Α 02/07): avatar + όνομα/κωδικός + κουμπάκια φάσεων ── Render από το beta layer v2 (app-beta.js) — ίδια δεδομένα & selectCase() */ body.beta .bcl-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; } body.beta .bcl-row:hover { background: var(--surface2); border-color: var(--border2); } body.beta .bcl-row.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } body.beta .bcl-av { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-weak); color: var(--accent-text); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.beta .bcl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } body.beta .bcl-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.beta .bcl-code { font-size: 10.5px; font-family: var(--mono); color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.beta .bcl-phases { display: flex; gap: 4px; flex-shrink: 0; } body.beta .bcl-ph { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface); color: var(--ink3); font-family: var(--body); font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; } body.beta .bcl-ph-A { border-color: var(--blue-mid); color: var(--blue); background: var(--blue-dim); } body.beta .bcl-ph-B { border-color: var(--amber-mid); color: var(--amber); background: var(--amber-dim); } body.beta .bcl-ph-T { border-color: var(--green-mid); color: var(--green); background: var(--green-dim); } body.beta .bcl-ph-A:hover, body.beta .bcl-ph-A.on { background: var(--blue); border-color: var(--blue); color: #fff; } body.beta .bcl-ph-B:hover, body.beta .bcl-ph-B.on { background: var(--amber); border-color: var(--amber); color: #fff; } body.beta .bcl-ph-T:hover, body.beta .bcl-ph-T.on { background: var(--green); border-color: var(--green); color: #fff; } body.beta .bcl-ph.on { box-shadow: 0 0 0 2px var(--accent-weak); } body.beta .bcl-err { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); } @media (max-width: 860px) { body.beta .client-list { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────── 5. STICKY NOTES PANEL — αιωρούμενη κάρτα με animation ──────────────────────────────────────────────── */ body.beta #stickyPanel { left: 18px !important; bottom: 18px !important; width: 342px !important; border-radius: 16px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow3) !important; z-index: 8995 !important; overflow: hidden !important; animation: betaNoteIn .26s cubic-bezier(.34, 1.35, .64, 1); } @keyframes betaNoteIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } body.beta .beta-note-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); } body.beta .beta-note-hd .bnh-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--amber-light); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.beta .beta-note-hd .bnh-tx { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; } body.beta .beta-note-hd .bnh-tx b { font-size: 12.5px; font-weight: 700; color: var(--ink); } body.beta .beta-note-hd .bnh-tx small { font-size: 10.5px; color: var(--ink4); font-weight: 400; } body.beta .beta-note-hd .bnh-x { width: 26px; height: 26px; border: none; border-radius: 8px; background: transparent; color: var(--ink4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0; } body.beta .beta-note-hd .bnh-x:hover { background: var(--red-light); color: var(--red); } body.beta #stickyNoteBook { border-radius: 10px !important; border: 1px solid var(--border2) !important; border-left: 4px solid var(--amber) !important; } body.beta #stickyCase { font-size: 12.5px !important; } body.beta #stickyTimestamp { color: var(--green) !important; font-weight: 600; } /* ──────────────────────────────────────────────── 6. TABS — καθαρό pill switcher (ύφος prototype) ──────────────────────────────────────────────── */ body.beta .tabs { background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 24px; min-height: 62px; } body.beta .tabs-group { background: var(--surface2); border: 1px solid var(--border); box-shadow: none; border-radius: var(--r); padding: 3px; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="dark"] body.beta .tabs-group, body.beta[data-theme="dark"] .tabs-group { background: var(--surface2); border: 1px solid var(--border); box-shadow: none; } body.beta .tab { border-radius: 8px; padding: 7px 15px 8px; font-size: 13px; } body.beta .tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } /* περιεχόμενο καρτελών: περισσότερος αέρας */ body.beta .tab-content { padding: 26px 28px 60px; } /* ──────────────────────────────────────────────── 7. (Οι KPI κάρτες αφαιρέθηκαν 02/07 κατόπιν feedback — τα ποσά υπάρχουν ήδη στα summary chips της μπάρας καρτελών.) ──────────────────────────────────────────────── */ /* ──────────────────────────────────────────────── 8. ΠΙΝΑΚΕΣ (Παραστατικά / Πληρωμές) → σειρές-κάρτες Διατηρούνται 100% ταξινόμηση, φίλτρα, expandable panels. ──────────────────────────────────────────────── */ body.beta .inv-table-wrap { background: transparent; border: none; border-radius: 0; box-shadow: none; overflow-x: auto; padding: 2px; } body.beta .inv-table { border-collapse: separate; border-spacing: 0 9px; } /* Επικεφαλίδες στηλών — επιλογή Α (02/07): πεζά, μεγαλύτερα, χωρίς αραίωση */ body.beta .inv-table th { background: transparent; border-bottom: none; color: var(--ink3); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 2px 13px 0; } /* Γραμμή φίλτρων: διακριτική ενιαία λωρίδα */ body.beta #invFilterRow td, body.beta #pmtFilterRow td { background: var(--surface2) !important; border: none; padding-top: 6px; padding-bottom: 6px; } body.beta #invFilterRow td:first-child, body.beta #pmtFilterRow td:first-child { border-radius: 10px 0 0 10px; } body.beta #invFilterRow td:last-child, body.beta #pmtFilterRow td:last-child { border-radius: 0 10px 10px 0; } /* Κάθε γραμμή = κάρτα */ body.beta .inv-table tbody td { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 13px; } body.beta .inv-table tbody td:first-child { border-left: 1px solid var(--border); border-radius: var(--r2) 0 0 var(--r2); } body.beta .inv-table tbody td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--r2) var(--r2) 0; } body.beta .inv-table tbody tr:hover:not(.row-panel-open) td { background: var(--surface); border-color: var(--border2); } body.beta .inv-table tr:last-child td { border-bottom: 1px solid var(--border); } /* Ανοιχτό panel παραδοτέων: teal αντί hardcoded μπλε */ body.beta .inv-table tbody tr.row-panel-open td { background: var(--accent-weak) !important; border-top: 2px solid var(--accent) !important; border-bottom: 2px solid var(--accent) !important; } body.beta .inv-table tbody tr.row-panel-open td:first-child { border-left: 4px solid var(--accent) !important; } /* Σύνολα (tfoot) ως διακριτή κάρτα */ body.beta .inv-table tfoot td { background: var(--surface2); border: none; font-weight: 600; padding: 12px 13px; } body.beta .inv-table tfoot td:first-child { border-radius: var(--r2) 0 0 var(--r2); } body.beta .inv-table tfoot td:last-child { border-radius: 0 var(--r2) var(--r2) 0; } /* Αναζήτηση πινάκων */ body.beta .inv-search { height: 38px; border-radius: var(--r); border-color: var(--border2); } /* Summary chips (πάνω μπάρα καρτελών) */ body.beta .isum { border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); } /* ── Στήλη «Παραδοτέα» (#invTable col 9) — ίδια συμπεριφορά με τη live: μόνιμη απαλή λωρίδα, πιο έντονη στο hover, έντονη όταν το panel είναι ανοιχτό ── */ body.beta #invTable thead th:nth-child(9) { background: var(--blue-light); color: var(--accent-text); border-bottom: none; } body.beta #invTable tbody td:nth-child(9) { background: var(--blue-light); border-left: 1px solid var(--blue-mid); border-right: 1px solid var(--blue-mid); } body.beta #invTable tbody tr:hover:not(.row-panel-open) td:nth-child(9) { background: var(--blue-mid); } body.beta #invTable tbody tr.row-panel-open td:nth-child(9) { background: var(--blue-mid) !important; } /* Κουμπιά παραδοτέων μέσα στη στήλη (📦 x/y και 💳 n) — μεγαλύτερα, pill, ΚΡΑΤΟΥΝ τα δυναμικά χρώματα κατάστασης (inline) από το app */ body.beta #invTable td:nth-child(9) .btn.btn-sm { font-size: 12.5px !important; width: 88px !important; padding: 8px 0 !important; border-radius: 99px !important; border-width: 1.5px !important; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, filter .12s; } body.beta #invTable td:nth-child(9) .btn.btn-sm:hover { transform: translateY(-1px); box-shadow: var(--shadow2); filter: brightness(1.03); } body.beta #invTable td:nth-child(9) > div { gap: 8px !important; } body.beta #invFilterRow td:nth-child(6) { background: var(--blue-light) !important; } body.beta #invTable tfoot td:nth-child(9) { background: var(--blue-light); } /* Ίδια λογική για τη στήλη «Ενέργειες» στις Πληρωμές (#pmtTable col 8) */ body.beta #pmtTable thead th:nth-child(8) { background: var(--blue-light); color: var(--accent-text); border-bottom: none; } body.beta #pmtTable tbody td:nth-child(8) { background: var(--blue-light); border-left: 1px solid var(--blue-mid); border-right: 1px solid var(--blue-mid); } body.beta #pmtTable tbody tr:hover td:nth-child(8) { background: var(--blue-mid); } /* ──────────────────────────────────────────────── 9. ΚΟΥΜΠΙΑ ──────────────────────────────────────────────── */ body.beta .btn { border-radius: var(--r); font-weight: 500; } body.beta .btn-primary:hover { box-shadow: 0 2px 8px rgba(59,111,202,.3); } body.beta .btn-cta { box-shadow: 0 2px 10px rgba(59,111,202,.3), 0 1px 3px rgba(59,111,202,.15); } body.beta .btn-cta:hover { box-shadow: 0 4px 16px rgba(59,111,202,.38), 0 2px 6px rgba(59,111,202,.18) !important; } /* ──────────────────────────────────────────────── 10. MODALS — πιο στρογγυλά, prototype ύφος ──────────────────────────────────────────────── */ body.beta .overlay { background: rgba(18,22,30,.45); } body.beta .modal { border-radius: 18px; box-shadow: var(--shadow3); } /* Σφραγίδα Εκδότη: ομαλή εναλλαγή στα κουμπιά θέσης (Αρχή / Και τα δύο / Τέλος) */ body.beta #wmPositionGroup button { transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease !important; } body.beta #wmPositionGroup button[data-active="true"] { box-shadow: 0 2px 8px rgba(59,111,202,.25); } /* ──────────────────────────────────────────────── 11. PROGRAM INFO BANNER — απαλό teal ──────────────────────────────────────────────── */ body.beta .prog-info-banner { background: var(--accent-weak); color: var(--accent-text); border-bottom: 1px solid var(--border); } [data-theme="dark"] body.beta .prog-info-banner, body.beta[data-theme="dark"] .prog-info-banner { color: var(--accent-text); } /* ──────────────────────────────────────────────── 12. AUTH OVERLAY — παραμένει το μπλε branding της κανονικής (τα default inline styles είναι ήδη μπλε — κανένα override) ──────────────────────────────────────────────── */ /* ──────────────────────────────────────────────── 13. SPLASH SVG — η νέα εικόνα (02/07) χρωματίζεται μόνη της μέσω CSS variables· δεν χρειάζεται override εδώ. ──────────────────────────────────────────────── */ /* ──────────────────────────────────────────────── 14. HOME SCREEN — ελαφρύ φρεσκάρισμα (κληρονομεί την παλέτα) ──────────────────────────────────────────────── */ body.beta .hs-section { border-radius: var(--r2); } body.beta #homeScreen .hs-inner { padding-top: 26px; } /* (Το μέγεθος splash ενοποιήθηκε στα 680px μέσα στα ίδια τα HTML — live & beta.) */ /* ── Splash: εικόνα αριστερά + panel φακέλων δεξιά (02/07, ιδέα χρήστη) ── */ body.beta #splashScreen { flex-direction: row; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: center; padding: 40px 32px !important; } body.beta #splashScreen svg { flex: 1 1 380px; width: 100% !important; max-width: 560px !important; min-width: 320px; } body.beta #betaSplashCases { flex: 0 1 390px; min-width: 300px; max-width: 430px; max-height: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow2); overflow: hidden; display: flex; flex-direction: column; } body.beta .bsc-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; } body.beta .bsc-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-weak); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.beta .bsc-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } body.beta .bsc-tx b { font-size: 13px; font-weight: 700; color: var(--ink); } body.beta .bsc-tx small { font-size: 11px; color: var(--ink3); font-weight: 400; } body.beta .bsc-list { padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; } body.beta .bsc-all { border: none; border-top: 1px solid var(--border); background: var(--surface2); color: var(--accent-text); font-family: var(--body); font-size: 12px; font-weight: 600; padding: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .12s; flex-shrink: 0; } body.beta .bsc-all:hover { background: var(--accent-weak); } /* ──────────────────────────────────────────────── 14β. CHECKLIST «Γενικά Παραδοτέα» — Λίστα-πάνελ με pills (επιλογή Β) Όλες οι ενότητες μέσα σε ΕΝΑ ενιαίο panel· κάθε ενότητα μια σειρά με εικονίδιο, τίτλο, μετρητές-pills και βελάκι. Ίδια IDs/κλικ/λογική. ──────────────────────────────────────────────── */ body.beta #checklistSections { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); } body.beta #checklistSections .section { background: transparent; border: none; border-radius: 0; margin-bottom: 0 !important; box-shadow: none; border-top: 1px solid var(--border); } body.beta #checklistSections .section:first-child { border-top: none; } body.beta #checklistSections .section:hover { box-shadow: none; } /* Σειρά-κεφαλίδα ενότητας */ body.beta .sec-hd { background: var(--surface); border-bottom: none; padding: 14px 18px; gap: 12px; } body.beta .sec-hd:hover { background: var(--surface2); } body.beta .sec-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 16px; } body.beta .sec-title { font-size: 13.5px; } body.beta .sec-prog-txt { font-family: var(--body); } /* Μετρητές ενοτήτων — επιλογή Γ (02/07): μίνι δαχτυλίδι προόδου. --p = ποσοστό, --rc = χρώμα κατάστασης· λεπτομέρειες στο tooltip. */ body.beta .beta-ring { display: inline-flex; flex-shrink: 0; } body.beta .beta-ring svg { display: block; } /* η χρωματιστή τελίτσα .sec-status περιττεύει — το δαχτυλίδι λέει την ίδια ιστορία */ body.beta .sec-status { display: none; } body.beta .sec-arrow { font-size: 11px; color: var(--ink3); } /* Σώμα ενότητας — ελαφρώς «βυθισμένο» για να ξεχωρίζει το ανοιχτό */ body.beta .sec-body:not(.hidden) { border-top: 1px solid var(--border); } /* Σειρές εγγράφων */ body.beta .chk-row { padding: 13px 18px; gap: 12px; } body.beta .chk-num { min-width: 22px; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-weak); color: var(--accent-text); font-family: var(--body); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding-top: 0; } body.beta .chk-text { font-weight: 500; } /* Κατάσταση εγγράφου — στρογγυλά chips (επιλογή Β 02/07): τα ανενεργά δείχνουν αχνά το σύμβολό τους, το ενεργό γεμίζει χρώμα */ body.beta .tick3 { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); color: var(--ink4); opacity: .55; font-size: 13px; } body.beta .tick3:hover { opacity: 1; transform: scale(1.1); } body.beta .tick3.on { opacity: 1; } body.beta .tick3-yes:hover, body.beta .tick3-yes.on { border-color: var(--green); background: var(--green-light); color: var(--green); } body.beta .tick3-no:hover, body.beta .tick3-no.on { border-color: var(--red); background: var(--red-light); color: var(--red); } body.beta .tick3-na:hover, body.beta .tick3-na.on { border-color: var(--blue); background: var(--blue-light); color: var(--blue); } /* ── ΓΕΝΙΚΑ ΠΑΡΑΔΟΤΕΑ: segmented control με λέξεις (δοκιμή 02/07) ── Μόνο στο tab-checklist· στα panels παραστατικών/πληρωμών μένουν τα chips. Ίδια κουμπιά/onclick — αλλάζει μόνο η εμφάνιση. */ body.beta #tab-checklist .chk-ctrl { gap: 0; flex-wrap: wrap; justify-content: flex-end; } body.beta #tab-checklist .chk-ctrl .tick3 { width: auto; height: 30px; padding: 0 13px; margin-left: -1px; border-radius: 0; border: 1px solid var(--border2); background: var(--surface); color: var(--ink4); opacity: 1; font-size: 0; /* κρύβει το παλιό σύμβολο */ position: relative; } body.beta #tab-checklist .chk-ctrl .tick3::after { font-size: 11.5px; font-weight: 600; font-family: var(--body); letter-spacing: 0; white-space: nowrap; } body.beta #tab-checklist .chk-ctrl .tick3-yes { margin-left: 0; border-radius: 9px 0 0 9px; } body.beta #tab-checklist .chk-ctrl .tick3-yes::after { content: "Πλήρες"; } body.beta #tab-checklist .chk-ctrl .tick3-no::after { content: "Εκκρεμεί"; } body.beta #tab-checklist .chk-ctrl .tick3-na { border-radius: 0 9px 9px 0; margin-right: 10px; } body.beta #tab-checklist .chk-ctrl .tick3-na::after { content: "Δεν απαιτείται"; } body.beta #tab-checklist .chk-ctrl .tick3:hover { transform: none; opacity: 1; z-index: 1; } body.beta #tab-checklist .chk-ctrl .tick3.on { z-index: 1; } body.beta #tab-checklist .chk-ctrl .tick3-yes:hover, body.beta #tab-checklist .chk-ctrl .tick3-yes.on { border-color: var(--green); background: var(--green-light); color: var(--green); } body.beta #tab-checklist .chk-ctrl .tick3-no:hover, body.beta #tab-checklist .chk-ctrl .tick3-no.on { border-color: var(--red); background: var(--red-light); color: var(--red); } body.beta #tab-checklist .chk-ctrl .tick3-na:hover, body.beta #tab-checklist .chk-ctrl .tick3-na.on { border-color: var(--blue); background: var(--blue-light); color: var(--blue); } /* Σημείωση παραδοτέου: κάτω από τα κουμπιά, στοιχισμένη μαζί τους (02/07) */ body.beta #tab-checklist .chk-note { flex-basis: 100%; width: auto; margin-top: 7px; } body.beta .chk-note { border-radius: 8px; background: var(--surface2); } body.beta .chk-note:focus { background: var(--surface); } body.beta .guidance-pill { border-radius: 8px; } /* ──────────────────────────────────────────────── 15. PRINT — τα νέα beta στοιχεία δεν τυπώνονται ──────────────────────────────────────────────── */ @media print { body.beta #betaKpis, body.beta #betaCaseSwitch, body.beta #betaNotesBtn, body.beta .sidebar { display: none !important; } /* επαναφορά συμπαγούς πίνακα στην εκτύπωση */ body.beta .inv-table { border-collapse: collapse; border-spacing: 0; } body.beta .inv-table tbody td { border-radius: 0 !important; border-left: none !important; border-right: none !important; } } /* ──────────────────────────────────────────────── 16. ΜΙΚΡΟ RESPONSIVE για το dropdown & τα KPIs ──────────────────────────────────────────────── */ @media (max-width: 720px) { body.beta .sidebar { width: calc(100vw - 16px); } body.beta .client-list { grid-template-columns: 1fr; } body.beta .beta-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } body.beta #betaCaseSwitchBtn .bcs-lbl { display: none; } } /* ──────────────────────────────────────────────── 17. ΣΕΙΡΑ ΚΟΥΜΠΙΩΝ TOPBAR (02/07, απόφαση χρήστη): Φάκελοι Δράσης → Νέος Φάκελος → Αρχική → Συνδρομή → λοιπά ──────────────────────────────────────────────── */ body.beta .topbar-right #betaCaseSwitch { order: 1; } body.beta .topbar-right #btnNewCaseTopbar { order: 2; } body.beta .topbar-right #btnBackHome { order: 3; } body.beta .topbar-right #subscriptionBtn { order: 4; } body.beta .topbar-right #settingsGearBtn { order: 5; } body.beta .topbar-right #guideBtn { order: 6; } body.beta .topbar-right #contactBtn { order: 7; } body.beta .topbar-right #themeBtnWrap { order: 8; } /* ──────────────────────────────────────────────── 18. ΟΠΣΚΕ chip — διακριτικό αντί για γεμάτο badge (02/07) ──────────────────────────────────────────────── */ body.beta .chk-opske { background: var(--surface2); border: 1px solid var(--border); color: var(--ink3); box-shadow: none; font-weight: 600; letter-spacing: .01em; padding: 2px 8px 2px 6px; border-radius: 6px; } body.beta .chk-opske::before { background: transparent; color: var(--ink4); padding: 0 6px 0 0; margin-right: 1px; border-radius: 0; border-right: 1px solid var(--border2); } /* ──────────────────────────────────────────────── 19. ΓΡΑΜΜΙΚΑ ΕΙΚΟΝΙΔΙΑ αντί emoji (CSS masks — χρωματίζονται με currentColor) ──────────────────────────────────────────────── */ /* Ενότητες checklist: ενιαίο εικονίδιο φακέλου αντί για emoji ανά ενότητα */ body.beta .sec-icon { font-size: 0 !important; position: relative; } body.beta .sec-icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; background-color: var(--accent-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Guidance pills: 💡⚠️🚨 → καθαρά γραμμικά σύμβολα */ body.beta .guidance-pill .gp-icon { font-size: 0; width: 13px; height: 13px; margin-top: 1px; position: relative; } body.beta .guidance-pill .gp-icon::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask: var(--gp-mask) center / contain no-repeat; mask: var(--gp-mask) center / contain no-repeat; } body.beta .gp-why .gp-icon, body.beta .gp-tip .gp-icon { --gp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 1 3.6 10.8c-.6.5-.6 1.2-.6 2.2h-6c0-1 0-1.7-.6-2.2A6 6 0 0 1 12 3z'/%3E%3C/svg%3E"); } body.beta .gp-warn .gp-icon { --gp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 15.5H3z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E"); } body.beta .gp-err .gp-icon { --gp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E"); } body.beta .gp-ok .gp-icon { --gp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.3 2.3 4.7-4.7'/%3E%3C/svg%3E"); } /* ──────────────────────────────────────────────── 20. MICRO-ANIMATIONS — εναλλαγή καρτελών & άνοιγμα panels ──────────────────────────────────────────────── */ body.beta .tab-content.active { animation: betaTabIn .24s ease forwards; } @keyframes betaTabIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } body.beta .inv-table tr[id*="panel-"] > td > div { animation: betaPanelIn .22s ease; } @keyframes betaPanelIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } body.beta .sec-body:not(.hidden) .chk-row { animation: betaPanelIn .25s ease; } /* ──────────────────────────────────────────────── 21. Ημερομηνία στην topbar της Αρχικής — πιο έντονη (02/07) ──────────────────────────────────────────────── */ body.beta #hsGreetSub { font-size: 13px !important; font-weight: 700 !important; color: var(--ink2) !important; } body.beta #hsGreetSub strong { color: var(--accent-text); } /* «+N ακόμα» στη splash λίστα όταν οι φάκελοι ξεπερνούν τους 6 (02/07) */ body.beta .bsc-more { border: 1.5px dashed var(--border2); background: transparent; color: var(--accent-text); font-family: var(--body); font-size: 12px; font-weight: 600; padding: 10px; border-radius: 12px; cursor: pointer; transition: all .12s; } body.beta .bsc-more:hover { border-color: var(--accent); background: var(--accent-weak); } /* ═══ REPORT REDESIGN + spinners (02/07 β΄ συνεδρία) ═══ */ body.beta #reportContent { font-size: 13px; line-height: 1.55; } body.beta #reportContent .brep-srow { transition: background .12s ease, transform .12s ease; } body.beta #reportContent .brep-srow:hover { background: var(--surface2); transform: translateX(2px); } body.beta .rsec-filter-btn { border-radius: 99px !important; transition: transform .1s ease; } body.beta .rsec-filter-btn:hover { transform: translateY(-1px); } /* Spinner φόρτωσης αντί για ⏳ */ body.beta .beta-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border2); border-top-color: var(--accent); animation: betaSpin .8s linear infinite; } body.beta .beta-spin-lg { width: 34px; height: 34px; border-width: 4px; } @keyframes betaSpin { to { transform: rotate(360deg); } } /* ═══ FINDER «Φάκελοι Δράσης» polish (03/07 — επιλογή χρήστη: και τα δύο) ═══ */ /* 1. Blur + βαθύτερο dim στο φόντο — spotlight στο panel */ body.beta.beta-cases-open::before { background: rgba(10, 14, 22, .48); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* 2α. Λεπτή διακριτική scrollbar στη λίστα φακέλων */ body.beta .sidebar .client-list { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } body.beta .sidebar .client-list::-webkit-scrollbar { width: 5px; } body.beta .sidebar .client-list::-webkit-scrollbar-track { background: transparent; } body.beta .sidebar .client-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } body.beta .sidebar .client-list::-webkit-scrollbar-thumb:hover { background: var(--ink4); } /* 2β. Σκιά-fade στο κάτω άκρο ΜΟΝΟ όταν υπάρχει κι άλλο περιεχόμενο (background-attachment: local τέχνασμα — το «κάλυμμα» κυλάει με το περιεχόμενο και κρύβει τη σκιά όταν φτάσεις στο τέλος) */ body.beta .sidebar .client-list { background: linear-gradient(to top, var(--surface) 30%, rgba(255, 255, 255, 0)) bottom / 100% 44px, radial-gradient(farthest-side at 50% 100%, rgba(2, 6, 16, .34), transparent) bottom / 100% 16px; background-repeat: no-repeat; background-attachment: local, scroll; } /* ═══ §18. SMOOTH αλλαγή κατάστασης παραδοτέου (03/07) ═══ */ /* Σειρά: το χρωματιστό φόντο (state-yes/no/na) σβήνει/ανάβει ομαλά */ body.beta .chk-row { transition: background .35s ease; } body.beta .chk-row .chk-text { transition: color .3s ease; } /* Κουμπιά κατάστασης (chips + segmented): ομαλό γέμισμα χρώματος */ body.beta .tick3 { transition: background .22s ease, color .22s ease, border-color .22s ease, opacity .18s ease, transform .15s ease; } /* Δαχτυλίδι ενότητας: το τόξο «κυλάει» στη νέα τιμή και το χρώμα ξεθωριάζει (δουλεύει μαζί με το in-place update του r_h στο app-beta.js) */ body.beta .beta-ring svg circle:last-child { transition: stroke-dasharray .55s cubic-bezier(.25, .8, .3, 1), stroke .35s ease; } /* ═══ §19. SMOOTHNESS PACK (03/07): toasts, modals, θέμα ═══ */ /* Toasts: γλιστρούν απαλά από κάτω (η κλάση beta-show μπαίνει από το layer v4) */ body.beta .toast { translate: 0 14px; transition: opacity .3s ease, translate .34s cubic-bezier(.2, .8, .3, 1); } body.beta .toast.beta-show { translate: 0 0; } /* Modals: πιο απαλή είσοδος — τρέχει σε ΚΑΘΕ άνοιγμα (κλειδωμένη στο .open) */ body.beta .overlay { transition: opacity .25s ease; } body.beta .overlay.open .modal { animation: betaModalIn .28s cubic-bezier(.22, .9, .3, 1); } @keyframes betaModalIn { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: none; } } /* Cross-fade θέματος: όσο υπάρχει η προσωρινή κλάση, όλα τα χρώματα μεταβαίνουν ομαλά (τη βάζει/βγάζει το layer v4 για ~0.4s) */ body.beta.beta-theme-fade, body.beta.beta-theme-fade *, body.beta.beta-theme-fade *::before, body.beta.beta-theme-fade *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important; } /* ═══ §20. ΓΕΝΙΚΑ ΠΑΡΑΔΟΤΕΑ — επιλογή Β (03/07): κάθε ενότητα ξεχωριστή κάρτα, ίδιο ύφος με τις κάρτες της Αναφοράς (υπερισχύει του ενιαίου panel της §… παραπάνω επειδή έρχεται αργότερα στη ροή του αρχείου) ═══ */ body.beta #checklistSections { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; } body.beta #checklistSections .section { background: var(--surface); border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px !important; box-shadow: var(--shadow); overflow: hidden; } body.beta #checklistSections .section:first-child { border-top: 1px solid var(--border); } body.beta #checklistSections .section:last-child { margin-bottom: 0 !important; } body.beta #checklistSections .section:hover { box-shadow: var(--shadow); } /* ═══ §21. MODAL CLOSE FIX (03/07): συμμετρικό άνοιγμα/κλείσιμο ═══ Το «αναπήδημα» στο κλείσιμο: μόλις έφευγε το .open, το .modal γύριζε στο βασικό animation εισόδου (modalIn) και το ξανάπαιζε ενώ χανόταν. Λύση: κανένα animation — μόνο transitions, ίδια διαδρομή και στις δύο κατευθύνσεις (υπερισχύει της §19 επειδή έρχεται αργότερα). */ body.beta .overlay .modal, body.beta .overlay.open .modal { animation: none; } body.beta .overlay .modal { transform: translateY(10px) scale(.965); transition: transform .26s cubic-bezier(.22, .9, .3, 1); } body.beta .overlay.open .modal { transform: none; } /* ═══ §22. Chip «⚠ Εκκρεμότητες» σε Παραστατικά/Πληρωμές: ΑΦΑΙΡΕΘΗΚΕ (ρητή απόφαση χρήστη 03/07 — τα flags φαίνονται ήδη ανά σειρά) ═══ */ body.beta .isum[onclick="showInvErrorsModal()"], body.beta .isum[onclick="showPmtErrorsModal()"] { display: none !important; } /* ═══ §23. BUILDER (Studio) — BETA RESKIN α΄ (03/07/2026) Μόνο εμφάνιση, scoped body.beta — builder.css/builder.js ΑΝΕΓΓΙΧΤΑ. Στόχος: ίδια γλώσσα με τις κάρτες Αναφοράς (r14/border/shadow/14px) + επικεφαλίδες πεζά. Όλα μέσω vars → σωστά και στα 3 θέματα. ═══ */ /* ── 23.1 Κάρτες: ενιαία συνταγή ── */ body.beta .bldr-screen-header, body.beta .bldr-form-card, body.beta .bldr-cl-sec, body.beta .bldr-r2-sec { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); } body.beta .bldr-screen-header { margin-bottom: 14px; } body.beta .bldr-form-card { margin-bottom: 14px; } body.beta .bldr-cl-sec { margin-bottom: 14px; } body.beta .bldr-r2-sec { margin-bottom: 14px; } body.beta .bldr-prog-grid { gap: 14px; } body.beta .bldr-prog-card { box-shadow: var(--shadow); } /* ── 23.2 Program card v2: flat κεφαλίδα αντί για gradient ── */ body.beta .bldr-prog-card-head-v2 { background: var(--surface2); border-bottom: 1px solid var(--border); } body.beta .bldr-prog-card-head-v2 .bldr-prog-card-code { background: var(--surface); border: 1px solid var(--border); color: var(--accent-text); } body.beta .bldr-prog-card-v2 .bldr-prog-card-actions { background: var(--surface2); border-top: 1px solid var(--border); } /* ── 23.3 Επικεφαλίδες πινάκων/στηλών: πεζά 11.5px/600 (συνταγή Αναφοράς) ── */ body.beta .bldr-table thead th, body.beta .bldr-delivsum-table thead th { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--ink3); background: var(--surface2); border-bottom: 1px solid var(--border2); } body.beta .bldr-invdocs-head, body.beta .bldr-invdocs-col-head, body.beta .bldr-invpmts-head { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; } body.beta .bldr-edit-section-title, body.beta .bldr-field-group-title { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2); } /* ── 23.4 Τίτλοι καρτών: ύφος τίτλων Αναφοράς beta ── */ body.beta .bldr-form-card-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; } body.beta .bldr-form-card-title .bldr-num { background: var(--surface2); border: 1px solid var(--border); color: var(--accent-text); border-radius: 8px; } body.beta .bldr-cl-sec-title, body.beta .bldr-r2-sec-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; } body.beta .bldr-r2-sec-letter { background: var(--surface2); border: 1px solid var(--border); color: var(--accent-text); border-radius: 9px; } /* ── 23.5 CaseView tabs: pill switcher όπως το beta (το δίπατο ring+pill εσωτερικό ΔΕΝ αλλάζει) ── */ body.beta .bldr-case-tabs { background: var(--surface2); border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: var(--r); padding: 4px; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: 14px; } body.beta .bldr-case-tabs-v3 { padding: 4px; min-height: 0; } body.beta .bldr-case-tab { border-bottom: none; margin-bottom: 0; border-radius: 8px; } body.beta .bldr-case-tab:hover { background: var(--surface3); color: var(--ink); } body.beta .bldr-case-tab-active, body.beta .bldr-case-tab-active:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border-bottom: none; } /* ── 23.6 Κάρτα «Studio» στην αρχική: δένει με τις υπόλοιπες ── */ body.beta #homeScreen .bldr-hs-prog-card-custom.bldr-hs-custom-banner { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } body.beta #homeScreen .bldr-hs-prog-card-custom.bldr-hs-custom-banner:hover { border-color: var(--border2); box-shadow: var(--shadow2); transform: translateY(-1px); } body.beta .bldr-cb-tile { border-radius: 12px; box-shadow: none; } body.beta .bldr-cb-chip { background: var(--surface2); } /* ── 23.7 Drawer/λοιπά: ευθυγράμμιση radius ── */ body.beta .bldr-modal { box-shadow: var(--shadow3); } /* ═══ §24. BUILDER — emoji πέρασμα (03/07): masks στις άδειες icon-classes. Το builder-beta.js αφαιρεί τους χαρακτήρες· εδώ δίνουμε το εικονίδιο μέσω CSS mask (currentColor/accent) — δουλεύει και στα 3 θέματα. ═══ */ body.beta .bldr-cl-sec-icon::before, body.beta .bldr-cl-section-icon::before, body.beta .bldr-custom-cats-icon::before, body.beta .bldr-vat-icon::before, body.beta .bldr-indirect-icon::before, body.beta .bldr-rule-impl-info-icon::before, body.beta .bldr-offers-icon::before, body.beta .bldr-doc-row2-offers-ic::before, body.beta .bldr-invdocs-head-icon::before, body.beta .bldr-invdocs-col-icon-wrap::before, body.beta .bldr-hs-pill-custom-icon::before, body.beta .bldr-hs-cases-sep-icon::before, body.beta .bldr-hs-case-dot-custom::before, body.beta .bldr-disb-section-icon::before, body.beta .bldr-edit-warning-icon::before, body.beta .bldr-prop-banner-icon::before, body.beta .bldr-hbadge-inspector-ic::before, body.beta .bldr-disb-applies-legend-icon::before, body.beta .bldr-pmt-hint-icon::before, body.beta .bldr-disb-report-head-icon::before { content: ""; display: inline-block; width: 16px; height: 16px; background: var(--accent-text); -webkit-mask: var(--bmask) center / contain no-repeat; mask: var(--bmask) center / contain no-repeat; vertical-align: -3px; } body.beta .bldr-cl-sec-icon, body.beta .bldr-cl-section-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } body.beta .bldr-custom-cats-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } body.beta .bldr-vat-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9.5 13h5M9.5 16.5h5'/%3E%3C/svg%3E"); } body.beta .bldr-indirect-icon, body.beta .bldr-rule-impl-info-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 13l4-4 4 3 5-6'/%3E%3C/svg%3E"); } body.beta .bldr-offers-icon, body.beta .bldr-doc-row2-offers-ic { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E"); } body.beta .bldr-invdocs-head-icon, body.beta .bldr-invdocs-col-icon-wrap { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); } body.beta .bldr-hs-pill-custom-icon, body.beta .bldr-hs-cases-sep-icon, body.beta .bldr-hs-case-dot-custom { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); } body.beta .bldr-disb-section-icon, body.beta .bldr-edit-warning-icon, body.beta .bldr-prop-banner-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M12 12v4'/%3E%3C/svg%3E"); } body.beta .bldr-hbadge-inspector-ic, body.beta .bldr-disb-applies-legend-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } body.beta .bldr-pmt-hint-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.5 5.5l13 13'/%3E%3C/svg%3E"); --bmask-c: var(--red); } body.beta .bldr-pmt-hint-icon::before { background: var(--red); } body.beta .bldr-disb-report-head-icon { --bmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9.5 13h5M9.5 16.5h5'/%3E%3C/svg%3E"); } /* ── 24.2 Empty states (πρώην 📋/📭/📁): μεγάλο αχνό folder ── */ body.beta .bldr-empty-state-icon, body.beta .bldr-cl-inline-empty-icon, body.beta .bldr-cl-empty-icon, body.beta .bldr-drawer-empty-icon, body.beta .bldr-popup-empty-icon { display: inline-block; } body.beta .bldr-empty-state-icon::before, body.beta .bldr-cl-inline-empty-icon::before, body.beta .bldr-cl-empty-icon::before, body.beta .bldr-drawer-empty-icon::before, body.beta .bldr-popup-empty-icon::before { content: ""; display: inline-block; width: 34px; height: 34px; background: var(--ink4); opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; } /* coming-soon (πρώην 🚧): δεν χρειάζεται εικονίδιο */ body.beta .bldr-coming-soon-icon { display: none; } /* ── 24.3 Πεδίο εικονιδίου ενότητας: κρύβεται στη beta (τα icons δεν renderάρονται πλέον — το data μένει άθικτο) ── */ body.beta .bldr-field:has(#bldrSecIcon) { display: none; } /* ── 24.4 Dialog icon tile: γλυφές (!,?,i,✓,✕,✎) αντί emoji ── */ body.beta .bldr-dialog-icon { font-size: 19px; font-weight: 800; font-family: var(--body, 'Inter', system-ui, sans-serif); } /* ═══ §25. ΚΑΡΤΑ STUDIO ΑΡΧΙΚΗΣ — polish (03/07 β΄): νικά τα !important του builder.css (dashed frame/glow). Καθαρή beta κάρτα + accent tile. ═══ */ body.beta #homeScreen .bldr-hs-prog-card-custom { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } body.beta #homeScreen .bldr-hs-prog-card-custom:hover { border-color: var(--border2) !important; box-shadow: var(--shadow2) !important; transform: translateY(-1px); } /* το αστέρι-φάντασμα δεξιά: εκτός beta ύφους (στο dark έμοιαζε λεκές) */ body.beta .bldr-cb-deco { display: none; } /* τυπογραφία στο ύφος του beta */ body.beta .bldr-cb-title { font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; margin: 9px 0 4px; } body.beta .bldr-cb-sub { color: var(--ink3); font-size: 12.5px; line-height: 1.55; } body.beta .bldr-cb-kick { font-size: 9.5px; letter-spacing: .08em; background: var(--accent-weak); border: 1px solid transparent; color: var(--accent-text); border-radius: 99px; padding: 4px 10px; } body.beta .bldr-cb-chip { background: var(--surface2); border: 1px solid var(--border); color: var(--ink2); font-size: 10.5px; font-weight: 600; padding: 4px 11px; } body.beta .bldr-cb-stats { color: var(--ink3); font-size: 12px; } body.beta .bldr-cb-tile { width: 54px; height: 54px; border-radius: 14px; } body.beta .bldr-cb-cta { border-radius: 9px; font-size: 12.5px; padding: 9px 16px; } /* chips χωρίς chevron › — καθαρό, σοβαρό ύφος */ body.beta .bldr-cb-chip::before { content: none; } /* ═══ §26. BUILDER SMOOTHNESS + MODALS/DRAWER (03/07 — packs Α+Β) ═══ */ /* ── 26.1 Είσοδος οθονών Studio: απαλό fade+lift σε κάθε εναλλαγή ── */ @keyframes bldrScreenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.beta .bldr-screen { animation: bldrScreenIn .32s cubic-bezier(.2,.8,.25,1); } /* ── 26.2 Modals: scale-fade όπως το betaModalIn του app + blur backdrop ── */ @keyframes bldrModalInB { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: none; } } body.beta .bldr-overlay { background: rgba(15, 23, 42, .48); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity .22s ease; } body.beta .bldr-overlay.bldr-open .bldr-modal, body.beta .bldr-dialog-overlay .bldr-modal { animation: bldrModalInB .3s cubic-bezier(.16,1,.3,1); } /* ── 26.3 Drawer φακέλων: spring slide + blur + λεπτό scrollbar ── */ body.beta .bldr-drawer { transition: transform .34s cubic-bezier(.2,.9,.3,1.04); box-shadow: -12px 0 40px rgba(0,0,0,.16); } body.beta .bldr-drawer-overlay { background: rgba(15, 23, 42, .48); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } body.beta .bldr-drawer-body { scrollbar-width: thin; } body.beta .bldr-drawer-body::-webkit-scrollbar { width: 5px; } body.beta .bldr-drawer-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } body.beta .bldr-drawer-body::-webkit-scrollbar-track { background: transparent; } /* ── 26.4 Stepper: ζωντανά chips ── */ body.beta .bldr-stepper-chip { transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; } body.beta .bldr-stepper-chip:hover { transform: translateY(-1px); } body.beta .bldr-stepper-chip:active { transform: translateY(0) scale(.97); } body.beta .bldr-stepper-chip.is-active { box-shadow: var(--shadow); } /* ── 26.5 Case chips & ticks & rows: μαλακές μεταβάσεις ── */ body.beta .bldr-case-chip { transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } body.beta .bldr-case-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); } body.beta .bldr-tick { transition: all .18s ease; } body.beta .bldr-tick:active { transform: scale(.94); } @keyframes bldrRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } body.beta .bldr-cl-item { animation: bldrRowIn .2s ease both; } body.beta .bldr-btn:active { transform: translateY(1px); } /* ── 26.6 Cross-checks bar → pills (αντί για KPI στήλες) ── */ body.beta .bldr-csum-row { gap: 8px; } body.beta .bldr-csum-block { flex-direction: row; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; padding: 5px 13px; } body.beta .bldr-csum-label { font-size: 10px; letter-spacing: .05em; color: var(--ink3); } body.beta .bldr-csum-value { font-size: 13px; font-family: var(--mono); letter-spacing: 0; } body.beta .bldr-csum-block-hl { background: var(--accent-weak); border-color: transparent; border-radius: 99px; padding: 5px 13px; } body.beta .bldr-csum-block-hl .bldr-csum-label { color: var(--accent-text); } body.beta .bldr-csum-block-hl .bldr-csum-value { color: var(--accent-text); font-size: 13.5px; } body.beta .bldr-csum-arrow { font-size: 13px; margin: 0 -2px; } /* ── 26.7 Toast Builder: ύφος beta ── */ body.beta .bldr-toast { border-radius: 10px; box-shadow: var(--shadow2); } /* ═══ §27. SKELETON LOADERS (Ε) + DARK MICRO-TUNING (ΣΤ) — 03/07 ═══ */ /* ── 27.1 Σκελετοί: παλλόμενα placeholders αντί spinner ── */ @keyframes betaSkPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } body.beta .beta-sk { background: var(--surface3); border-radius: 6px; animation: betaSkPulse 1.3s ease-in-out infinite; } body.beta .beta-sk-list { display: flex; flex-direction: column; gap: 15px; max-width: 340px; margin: 0 auto 14px; text-align: left; } body.beta .beta-sk-row { display: flex; gap: 12px; align-items: center; } body.beta .beta-sk-row:nth-child(2) .beta-sk { animation-delay: .15s; } body.beta .beta-sk-row:nth-child(3) .beta-sk { animation-delay: .3s; } body.beta .beta-sk-av { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; } body.beta .beta-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; } body.beta .beta-sk-ln { height: 11px; width: 75%; border-radius: 4px; } body.beta .beta-sk-ln-s { height: 9px; width: 45%; } /* ── 27.2 Dark: borders +1 τόνος + διακριτικό ring στις σκιές — οι κάρτες «κόβονται» από το φόντο αντί να λιώνουν ── */ [data-theme="dark"] body.beta, body.beta[data-theme="dark"] { --border: #35455f; --border2: #45566f; --shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(148,163,184,.045); --shadow2: 0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(148,163,184,.055); } /* top highlight στις βασικές κάρτες: αίσθηση βάθους χωρίς gradient */ [data-theme="dark"] body.beta #checklistSections .section, [data-theme="dark"] body.beta .bldr-form-card, [data-theme="dark"] body.beta .bldr-cl-sec, [data-theme="dark"] body.beta .bldr-r2-sec, [data-theme="dark"] body.beta .bldr-screen-header, [data-theme="dark"] body.beta .bldr-prog-card { border-top-color: #4a5b78; } /* ═══ §28. FIX «χοροπήδημα» στο κλείσιμο των bldr modals (εύρημα χρήστη 03/07). Αιτία: στο close φεύγει το .bldr-open → το animation-name γύριζε στο βασικό bldrModalIn του builder.css και ΞΑΝΑΕΠΑΙΖΕ το enter animation· επιπλέον το overlay.remove() στα 180ms έκοβε το fade (ήταν 220ms). ═══ */ body.beta .bldr-overlay { transition: opacity .15s ease; } /* enter: ΜΟΝΟ όταν είναι ανοιχτό (καλύπτει shared + dialog overlays) */ body.beta .bldr-overlay.bldr-open .bldr-modal { animation: bldrModalInB .3s cubic-bezier(.16,1,.3,1); } /* exit: κανένα animation restart + απαλό slide-down που προλαβαίνει τα 180ms */ body.beta .bldr-overlay:not(.bldr-open) .bldr-modal { animation: none; opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }