Τίτλος
──────────────────────────────────────────────────────────────── */ .page-title { font-weight: 600; text-align: center; margin-bottom: 1.5rem; color: var(--bs-body-color); letter-spacing: -.01em; } /* ── Κεφαλίδα σελίδας με κουμπιά ── (αίτημα 17/09/2026) Τίτλος στο κέντρο και όταν έχει δίπλα του «Πίσω» ή ενέργειες. Μετρημένο πριν, απόσταση του τίτλου από το κέντρο στα 1280px: Εργαλεία −455, Απογραφή −442, Ανακλήσεις −350, Ειδοποιήσεις −330, Προσθήκη +34 (το «Πίσω» τον έσπρωχνε).«Πίσω»
(προαιρετικό)
Τίτλος
ενέργειες
(προαιρετικό)
Τίτλος ενότητας
──────────────────────────────────────────────────────────────── */
.page-section-header {
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--bs-secondary-color);
margin-bottom: .5rem;
}
/* ─────────────────────────────────────────────────────────────
RESPONSIVE — mobile
──────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
.page-card { padding: 1rem; margin: .75rem; border-radius: .5rem; }
.page-frame { margin-top: .75rem; margin-bottom: .75rem; }
.page-title { font-size: 1.4rem; margin-bottom: 1rem; }
.page-search { min-width: 140px; max-width: 100%; }
.page-toolbar { flex-direction: column; align-items: stretch; }
.page-toolbar__right { justify-content: flex-end; }
}
/* ── Global ───────────────────────────────────────────────── */
/* Κρατά δεσμευμένο χώρο για scrollbar ώστε το toggle του modal-open
να μην προκαλεί layout shift (flash) κατά το άνοιγμα/κλείσιμο modals */
html {
scrollbar-gutter: stable;
background-color: #e8eef6; /* ενιαίο χρώμα — χωρίς gradient για consistent scroll */
overflow-x: hidden; /* αποτρέπει τυχόν στοιχείο που ξεχειλίζει οριζόντια από το να
πλατύνει το viewport (π.χ. έσπρωχνε το fixed bottom nav εκτός θέας) */
}
/* scrollbar-gutter:stable δεσμεύει ήδη τον χώρο — ακυρώνουμε το Bootstrap padding-right
που προκαλεί layout shift (flash/reflow) κατά το άνοιγμα modal */
body.modal-open { padding-right: 0 !important; }
/* ── Κολλητά στοιχεία πίσω από ανοιχτό modal ──
Αναφορά ιδιοκτήτη 16/09/2026: κυλισμένη Λίστα, ανοίγει modal, και η
γραμμή εργαλείων/κεφαλίδα «εξαφανίζονται από το φόντο». Μετρημένο: η
γραμμή από top 0 πήγαινε στο **−1349** όσο ήταν ανοιχτό το modal.
Το Bootstrap κλειδώνει την κύλιση με `overflow: hidden` στο **body**.
Επειδή το δεν έχει `overflow: visible` (βλ. παραπάνω), το
overflow του body ΔΕΝ περνά στο viewport: το body γίνεται δικό του,
μη κυλισμένο πλαίσιο κύλισης, και κάθε `sticky` μέσα του πέφτει στη
φυσική του θέση. Ίδια ρίζα με την πάνω μπάρα του κινητού (έγινε fixed).
Το κλείδωμα γίνεται στο — το ίδιο το viewport, που μένει στην
ίδια θέση κύλισης — και το body μένει `visible`. */
body.modal-open { overflow: visible !important; }
html:has(> body.modal-open) { overflow-y: hidden !important; }
body {
background-color: #ffffff;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
margin: 0;
display: flex;
}
/* ── Sidebar ──────────────────────────────────────────────── */
/* Πλάτος μπάρας ως μεταβλητή: το διαβάζουν το `.main-wrapper` και η
κολλητή μπάρα εργαλείων της λίστας. Η ράγα και η κρυφή μορφή το
αλλάζουν παρακάτω, μόνο στον υπολογιστή. */
:root { --gary-sidebar-w: 220px; }
.sidebar {
width: 220px;
min-height: 100vh;
/* Συμπαγές (σχέδιο 1b). Το gradient από κρεμ υπήρχε για το τεντωμένο
λογότυπο, που έφυγε. ⚠️ Και **χωρίς `backdrop-filter`**: κάνει την
μπάρα containing block για κάθε `position: fixed` μέσα της, οπότε
τα αναδυόμενα πάνελ της ράγας θα κόβονταν στα 68px της. */
background: #1e3a28;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1050;
display: flex;
flex-direction: column;
transition: transform 0.28s ease, width 0.28s ease;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.22) transparent;
}
/* ── Κεφαλίδα (σχέδιο 1b, μικρή εκδοχή) ── */
.sb-head {
padding: 10px 8px 13px;
display: flex; flex-direction: column; gap: 7px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.sb-brand-row { display: flex; align-items: center; gap: 6px; }
.sb-brand { display: flex; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.sb-tile {
width: 44px; height: 44px; border-radius: 12px; background: #faf8f4;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-tile img { width: 33px; height: auto; display: block; }
.sb-wordmark { height: 35px; width: auto; display: block; }
.sb-tagline { width: 146px; height: auto; opacity: .85; align-self: flex-start; display: block; }
#sidebarCollapseBtn { margin-left: auto; }
/* ── Κορυφή που δεν κυλά ──
`sticky` μέσα στη μπάρα (που είναι το scroll container). Τα
καρφιτσωμένα κολλούν κάτω από την κορυφή· το ύψος της το μετρά η JS
(`--sb-top-h`), με προεπιλογή το μετρημένο της ανοιχτής μορφής. */
.sb-top { position: sticky; top: 0; z-index: 6; background: #1e3a28; flex-shrink: 0; }
#sbPins {
position: sticky; top: var(--sb-top-h, 131px); z-index: 5;
background: #1e3a28; padding-bottom: 6px;
box-shadow: 0 1px 0 rgba(255,255,255,.09);
}
/* ── Αναζήτηση σελίδας ── */
.sb-search {
margin: 10px 10px 2px; height: 32px; padding: 0 9px;
display: flex; align-items: center; gap: 7px; flex-shrink: 0;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
}
.sb-search:focus-within { border-color: rgba(255,255,255,.4); }
.sb-search > .bi { font-size: 11px; color: rgba(255,255,255,.55); }
.sb-search input {
flex: 1; min-width: 0; height: 100%; padding: 0;
background: transparent; border: 0; outline: none; color: #fff; font-size: 12px;
}
.sb-search input::placeholder { color: rgba(255,255,255,.55); }
.sb-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.sb-kbd {
font-family: inherit; font-size: 9.5px; line-height: 1.2; white-space: nowrap;
color: rgba(255,255,255,.6); background: transparent;
border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 1px 4px;
}
.sidebar-nav {
/* 1 0 auto, όχι σκέτο «1»: το `flex: 1` σημαίνει flex-basis:0 με
flex-shrink:1, οπότε σε κοντή οθόνη το nav συρρικνωνόταν κάτω από
το ύψος του περιεχομένου του. Το περιεχόμενο ξεχείλιζε έξω από το
κουτί του, το scrollHeight του sidebar δεν το κάλυπτε, και το
.sidebar-footer έπεφτε εκτός κυλιόμενης έκτασης: σε ύψος 620px η
μέγιστη κύλιση ήταν 314 ενώ το κουμπί θέματος ήθελε ~540 —
«Φωτεινό/Σκοτεινό» και «Αποσύνδεση» ήταν απλησίαστα. */
flex: 1 0 auto;
padding: 0.6rem 0;
}
.sidebar-section {
padding: 0.9rem 1.2rem 0.3rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.65);
font-weight: 600;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 1.2rem;
color: rgba(255,255,255,0.92);
text-decoration: none;
font-size: 0.875rem;
position: relative;
transition: background 0.15s, color 0.15s;
border-left: 3px solid transparent;
}
.sidebar-link:hover {
background: rgba(255,255,255,0.07);
color: #fff;
}
/* Πορτοκαλί από το ίδιο το λογότυπο. Το προηγούμενο #4a9eff ήταν ένα
μπλε που δεν υπάρχει πουθενά αλλού στο brand. */
.sidebar-link.active {
/* Διακριτικό: η αριστερή γραμμή κάνει τη δουλειά της ένδειξης, το
φόντο απλώς τη συνοδεύει. Στο 16% διάβαζε ως πλακάκι. */
background: rgba(224,122,47,0.09);
color: #fff;
border-left-color: #e07a2f;
font-weight: 600;
}
.sidebar-link .badge-notify {
margin-left: auto;
background: var(--bs-danger);
color: #fff;
font-size: 0.7rem;
padding: 0.2em 0.5em;
border-radius: 1rem;
font-weight: 700;
line-height: 1;
}
/* Τα εικονίδια είναι Bootstrap Icons (γραμματοσειρά), όχι emoji: ένα
οικογενειακό σχέδιο, βάφονται με το currentColor και ευθυγραμμίζονται
μεταξύ τους. Το line-height:1 τα κρατά κεντραρισμένα στη γραμμή. */
.sidebar-icon {
width: 1.25em;
text-align: center;
flex-shrink: 0;
font-size: 1.05rem;
line-height: 1;
}
.sidebar-divider {
border-top: 1px solid rgba(255,255,255,0.08);
margin: 0.4rem 0;
}
/* ── Ανοιχτή μπάρα: σελίδες ως πλακίδια (σχέδιο 3a) ──
Οι κανόνες αφορούν **μόνο** το `.sidebar-nav`· το υποσέλιδο κρατά την
αριστερή γραμμή του. */
.sidebar-nav { padding: 4px 0 8px; }
.sidebar-nav .sb-items { padding: 0 8px; display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav .sidebar-section { padding: 12px 4px 5px; font-size: 10px; }
.sb-rail-btn, .sb-rail-only { display: none; }
.sb-row { position: relative; }
.sidebar-nav .sidebar-link {
padding: 8px 10px; border-radius: 9px; border-left: 0;
gap: 10px; font-size: 13px; min-height: 32px;
}
.sidebar-nav .sidebar-link .sidebar-icon { font-size: 14px; }
.sidebar-nav .sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav .sidebar-link.active { background: #e07a2f; color: #fff; font-weight: 600; }
.sidebar-nav .sidebar-link.active .badge-notify { background: rgba(0,0,0,.25); }
/* Καρφίτσα: δεξιά στη σειρά, σε hover/εστίαση (απόφαση ιδιοκτήτη
16/09/2026). Όσο φαίνεται, ο αριθμός της σειράς κρύβεται από κάτω της. */
.sb-pin {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
background: transparent; color: rgba(255,255,255,.75); font-size: 12px;
opacity: 0; transition: opacity .15s, background .15s;
}
.sb-row:hover .sb-pin, .sb-pin:focus-visible { opacity: 1; }
/* Αδιαφανές φόντο, ίδιο με τη σειρά σε hover: η καρφίτσα σκεπάζει το
τέλος ενός μακριού ονόματος αντί να του κρατά μόνιμα 34px — με αυτά
το «Προσθήκη αντικειμένου» έσπαγε σε δύο γραμμές. */
.sb-row:hover .sb-pin, .sb-pin:focus-visible { background: color-mix(in srgb, #1e3a28 92%, #fff); }
.sb-row:hover .sidebar-link.active + .sb-pin { background: #e07a2f; color: #fff; }
.sb-pin:hover, .sb-row:hover .sb-pin:hover { background: color-mix(in srgb, #1e3a28 80%, #fff); color: #fff; }
.sb-row:hover .sidebar-link.active + .sb-pin:hover { background: color-mix(in srgb, #e07a2f 80%, #000); }
.sb-pin:focus-visible { outline: 2px solid #e07a2f; outline-offset: 1px; }
.sb-row:hover .badge-notify, .sb-row:focus-within .badge-notify { visibility: hidden; }
/* Χωρίς ποντίκι (αφή) δεν υπάρχει hover: η καρφίτσα μένει ορατή, αχνή. */
@media (hover: none) {
.sb-pin { opacity: .6; }
.sb-row .badge-notify { visibility: visible !important; margin-right: 22px; }
}
/* `.sb-group` μπροστά: το `is-pinned` κρύβει τη σελίδα από την ενότητά
της, ποτέ από τη λίστα Καρφιτσωμένα. */
.sb-group.is-empty, .sb-group.sb-beyond, .sb-group .sb-row.is-pinned { display: none; }
/* «Περισσότερα» ανοιχτό: κλάση στο από το , πριν το paint. */
html.sb-more-expanded .sb-group.sb-beyond:not(.is-empty) { display: block; }
.sb-more-lbl-open { display: none; }
html.sb-more-expanded .sb-more .sb-more-lbl-closed { display: none; }
html.sb-more-expanded .sb-more .sb-more-lbl-open { display: inline; }
.sidebar.is-searching #sbPins,
.sidebar.is-searching .sb-group,
.sidebar.is-searching #sbMore { display: none !important; }
/* Σειρά καρφιτσωμένων με σύρσιμο (sidebar_nav.js). */
#sbPinList .sidebar-link { -webkit-user-drag: none; user-select: none; }
#sbPinList .sidebar-icon { touch-action: none; }
/* Κέρσορας πάνω-κάτω σε ΟΛΗ τη σελίδα όσο σέρνεται: ο δείκτης βγαίνει
εύκολα από τη λίστα, και ένα χεράκι-σύνδεσμος εκεί λέει «κλικ». */
html.sb-sorting, html.sb-sorting * { cursor: ns-resize !important; user-select: none !important; }
#sbPinList.is-sorting .sb-pin { opacity: 0 !important; }
/* Η θέση από την οποία σηκώθηκε: αχνή, όχι κενή — φαίνεται από πού ξεκίνησε. */
#sbPinList .sb-row.is-drag-source { opacity: .35; }
/* Το αιωρούμενο αντίγραφο. */
/* Ημιδιαφανές (αίτημα ιδιοκτήτη): αδιαφανές έκρυβε ό,τι είχε από κάτω —
και τη γραμμή απόθεσης. */
.sb-drag-ghost {
position: fixed; z-index: 1080; margin: 0; pointer-events: none;
transform: scale(1.03); transform-origin: left center;
opacity: .6;
}
.sb-drag-ghost .sidebar-link {
background: color-mix(in srgb, #1e3a28 80%, #fff);
color: #fff;
box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18);
}
.sb-drag-ghost .sidebar-link.active { background: #e07a2f; }
.sb-drag-ghost .sb-pin { display: none; }
.sb-drag-ghost .badge-notify { visibility: visible !important; }
/* Γραμμή απόθεσης, με κουκκίδα στην αρχή. */
/* Πάνω από το αιωρούμενο: η γραμμή είναι αυτό που λέει πού θα πέσει,
και δεν πρέπει να κρύβεται ποτέ από κάτω του. */
.sb-drop-line {
position: fixed; z-index: 1081; height: 2px; border-radius: 2px;
background: #e07a2f; pointer-events: none;
}
.sb-drop-line::before {
content: ''; position: absolute; left: -4px; top: -3px;
width: 8px; height: 8px; border-radius: 50%; background: #e07a2f;
}
.sb-drop-line[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sb-drag-ghost { transform: none; } }
.sb-more {
margin: 12px 8px 0; padding: 7px 10px; width: calc(100% - 16px);
display: flex; align-items: center; gap: 10px;
background: transparent; border: 0; border-radius: 9px; text-align: left;
color: rgba(255,255,255,.6); font-size: 12.5px;
}
.sb-more:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Αποτελέσματα: σελίδα και από κάτω η ενότητα — ποτέ στην ίδια γραμμή,
τρώει το πλάτος και κόβει τα μεγάλα ονόματα. */
.sb-result {
display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
color: rgba(255,255,255,.9); text-decoration: none;
}
.sb-result .sidebar-icon { font-size: 14px; }
.sb-result:hover, .sb-result.is-selected { background: rgba(255,255,255,.1); color: #fff; }
.sb-result.active { background: #e07a2f; color: #fff; }
.sb-result.active.is-selected { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.sb-r-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-r-title, .sb-r-sec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-r-title { font-size: 12.5px; line-height: 1.3; }
.sb-r-sec { font-size: 9.5px; color: rgba(255,255,255,.55); }
.sb-result.active .sb-r-sec { color: rgba(255,255,255,.8); }
.sb-no-results { padding: 6px 12px; font-size: 12px; color: rgba(255,255,255,.6); }
.sidebar :focus-visible { outline: 2px solid #e07a2f; outline-offset: 2px; }
/* ── Ράγα 68px και κρυφή μορφή: ΜΟΝΟ στον υπολογιστή ──
Το κριτήριο είναι το **ακριβές αντίστροφο** του κινητού παρακάτω
(«στενή οθόνη ή κινητό γυρισμένο πλάγια»). Με σκέτο `min-width` ένα
κινητό σε landscape (~844×390) θα έπαιρνε ράγα μέσα στο off-canvas. */
@media (min-width: 769px) and (orientation: portrait),
(min-width: 769px) and (min-height: 501px) {
html[data-sb="rail"] { --gary-sidebar-w: 68px; }
html[data-sb="hidden"] { --gary-sidebar-w: 0px; }
html[data-sb="hidden"] .sidebar { transform: translateX(-100%); }
html[data-sb="hidden"] .sidebar-show-pill { display: block; }
html[data-sb="rail"] .sidebar {
width: 68px; align-items: center; padding: 0 0 12px;
}
html[data-sb="rail"] .sb-top {
width: 100%; padding-top: 10px;
display: flex; flex-direction: column; align-items: center;
}
html[data-sb="rail"] .sb-open-only,
html[data-sb="rail"] .sb-wordmark,
html[data-sb="rail"] .sb-tagline,
html[data-sb="rail"] #sbPins,
html[data-sb="rail"] #sbResults,
html[data-sb="rail"] #sbMore { display: none !important; }
html[data-sb="rail"] .sb-head { padding: 0; border: 0; margin-bottom: 6px; }
html[data-sb="rail"] .sb-rail-only { display: flex; }
.sb-rail-expand {
width: 40px; height: 28px; margin-bottom: 6px; flex-shrink: 0;
align-items: center; justify-content: center;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
border-radius: 8px; color: rgba(255,255,255,.85); font-size: 13px;
transition: background .15s, color .15s;
}
.sb-rail-expand:hover { background: rgba(255,255,255,.2); color: #fff; }
html[data-sb="rail"] .sidebar-nav {
padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
html[data-sb="rail"] .sb-rail-btn {
display: flex; align-items: center; justify-content: center; position: relative;
width: 40px; height: 40px; flex-shrink: 0; padding: 0;
border: 0; border-radius: 11px; background: transparent;
color: rgba(255,255,255,.7); font-size: 17px;
transition: background .15s, color .15s;
}
html[data-sb="rail"] .sb-rail-btn:hover,
html[data-sb="rail"] .sb-rail-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
html[data-sb="rail"] .sb-rail-btn.is-current { background: rgba(224,122,47,.16); color: #fff; }
html[data-sb="rail"] .sb-rail-btn.is-current::before {
content: ''; position: absolute; left: -10px; top: 11px;
width: 3px; height: 18px; border-radius: 2px; background: #e07a2f;
}
/* Στη ράγα δεν χωρά αριθμός — μόνο τελεία· ο αριθμός είναι στο πάνελ. */
.sb-dot {
position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
background: var(--bs-danger); border: 1.5px solid #1e3a28; pointer-events: none;
}
.sb-dot[hidden] { display: none; }
/* Στη ράγα οι ενότητες είναι απλώς κοντέινερ: καμία δεν κρύβεται
λόγω καρφιτσώματος ή «Περισσότερα». */
html[data-sb="rail"] .sb-group,
html[data-sb="rail"] .sb-group.is-empty,
html[data-sb="rail"] .sb-group.sb-beyond { display: block; }
html[data-sb="rail"] .sb-row.is-pinned { display: block; }
html[data-sb="rail"] .sb-pin { display: none; }
/* Αναδυόμενο πάνελ: το ίδιο `.sb-items` της ανοιχτής μπάρας. `fixed`,
γιατί η μπάρα κυλά (`overflow-y: auto`) και θα το έκοβε. Το `top`
το βάζει η JS από τη θέση του εικονιδίου — όχι σταθερός τύπος. */
html[data-sb="rail"] .sb-group > .sb-items {
display: none; position: fixed; left: 68px; width: 210px; z-index: 1070;
padding: 11px 0; gap: 0;
/* Ένα σκαλί πιο βαθύ από τη μπάρα, χωρίς νέο καρφωτό χρώμα. */
background: color-mix(in srgb, #1e3a28 78%, #000);
border: 1px solid rgba(255,255,255,.12); border-left: 0;
border-radius: 0 12px 12px 0;
box-shadow: 12px 10px 30px rgba(10,20,14,.35);
}
html[data-sb="rail"] .sb-group.is-open > .sb-items { display: flex; animation: sbFlyIn 120ms ease-out; }
html[data-sb="rail"] .sb-items .sidebar-section { padding: 4px 14px 8px; font-size: 10px; }
html[data-sb="rail"] .sb-items .sidebar-link {
padding: 8px 14px 8px 11px; min-height: 0; border-radius: 0; gap: 9px;
border-left: 3px solid transparent; color: rgba(255,255,255,.9); font-weight: 400;
}
html[data-sb="rail"] .sb-items .sidebar-link .sidebar-icon { font-size: 13px; opacity: .8; }
html[data-sb="rail"] .sb-items .sidebar-link:hover { background: rgba(255,255,255,.07); }
html[data-sb="rail"] .sb-items .sidebar-link.active {
background: rgba(224,122,47,.14); border-left-color: #e07a2f; color: #fff; font-weight: 600;
}
html[data-sb="rail"] .sb-items .sidebar-link.active .badge-notify { background: var(--bs-danger); }
html[data-sb="rail"] .sb-row:hover .badge-notify { visibility: visible; }
@keyframes sbFlyIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* Στη ράγα κολλά πάντα κάτω (αίτημα 17/09/2026): το ελάχιστο
περιεχόμενό της (~486px) χωρά σε κάθε ύψος αυτής της μορφής. */
html[data-sb="rail"] .sb-rail-foot {
margin-top: auto; padding-top: 8px; flex-direction: column; align-items: center; gap: 6px;
position: sticky; bottom: 0; z-index: 6; width: 100%; background: #1e3a28;
}
html[data-sb="rail"] .sb-rail-foot .sb-rail-btn { font-size: 16px; }
html[data-sb="rail"] .sb-rail-foot .sb-rail-btn:hover { background: rgba(255,255,255,.1); }
html[data-sb="rail"] .sb-rail-foot .sb-rail-small { height: 28px; font-size: 13px; }
.sidebar .sb-rail-foot .gary-net-chip { margin: 0; padding: .15rem .35rem; }
.sb-avatar-btn {
width: 40px; height: 40px; padding: 0; border: 0; border-radius: 11px; background: transparent;
display: flex; align-items: center; justify-content: center; position: relative;
}
.sb-avatar-btn:hover, .sb-avatar-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.sb-avatar {
width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
background: var(--gary-primary); color: #fff; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-avatar-btn .sb-dot { top: 4px; right: 4px; }
/* Το υποσέλιδο γίνεται πάνελ πάνω από το αρχικό. Χωρίς `overflow`:
η λίστα γλωσσών είναι dropdown και θα κοβόταν. */
html[data-sb="rail"] .sidebar-footer {
display: none; position: fixed; left: 68px; bottom: 12px; width: 230px; z-index: 1070;
background: color-mix(in srgb, #1e3a28 78%, #000);
border: 1px solid rgba(255,255,255,.12); border-left: 0; border-radius: 0 12px 12px 0;
box-shadow: 12px 10px 30px rgba(10,20,14,.35);
}
html[data-sb="rail"] .sidebar-footer.is-open { display: block; animation: sbFlyIn 120ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar, .main-wrapper { transition: none !important; }
.sb-items, .sidebar-footer { animation: none !important; }
}
.sidebar-footer {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 0.4rem 0 0.6rem;
}
/* ── Κάτω μέρος που δεν κυλά ── (αίτημα 17/09/2026)
Αντίστοιχο του `.sb-top`. Την κλάση τη βάζει το `sidebar_nav.js`
μόνο όταν μένει χώρος για τις σελίδες. ⚠️ Ειδικότητα (0,2,0),
**κάτω** από το `html[data-sb="rail"] .sidebar-footer` (0,2,1): στη
ράγα το υποσέλιδο είναι αναδυόμενο πάνελ και πρέπει να κερδίζει εκείνο. */
.sb-foot-stick > .sidebar-footer {
position: sticky; bottom: 0; z-index: 6;
background: #1e3a28;
box-shadow: 0 -1px 0 rgba(255,255,255,.09);
}
/* Η αναζήτηση κάνει `scrollIntoView` — ένα αποτέλεσμα να μην κρύβεται από κάτω του. */
.sb-foot-stick { scroll-padding-bottom: var(--sb-foot-h, 0px); }
.sidebar-footer .sidebar-link.logout-link {
color: rgba(255,100,100,0.8);
}
.sidebar-footer .sidebar-link.logout-link:hover {
color: #ff6b6b;
background: rgba(var(--bs-danger-rgb), 0.1);
}
/* ── Sidebar toggle button (κλείσιμο — μέσα στο sidebar) ──── */
.sidebar-toggle-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
border-radius: .4rem;
color: rgba(255,255,255,.85);
cursor: pointer;
font-size: .85rem;
line-height: 1;
flex-shrink: 0;
transition: background .15s;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.22); color:#fff; }
/* ── "Άνοιξε το sidebar" floating pill όταν είναι κρυφό ──── */
.sidebar-show-pill {
position: fixed;
left: 0; top: 50%;
transform: translateY(-50%);
z-index: 1055;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: none;
border-radius: 0 .5rem .5rem 0;
padding: .55rem .45rem;
cursor: pointer;
font-size: .85rem;
line-height: 1;
box-shadow: 2px 0 8px rgba(0,0,0,.12);
color: var(--bs-body-color);
display: none;
}
.sidebar-show-pill:hover { background: var(--bs-tertiary-bg); }
/* ── Κρυφή μορφή ──────────────────────────────────────────────
Ήταν `body.sidebar-hidden`, μπαίνοντας από JS **μετά** τη φόρτωση —
δηλαδή η μπάρα φαινόταν για ένα καρέ σε κάθε πλοήγηση. Πλέον
`html[data-sb="hidden"]` από το , στο μπλοκ υπολογιστή πιο πάνω. */
/* Κρύψε pill σε mobile: εκεί η πλοήγηση γίνεται από την
κάτω μπάρα, και η πλευρική ανοίγει ως συρτάρι. */
/* ⚠️ **Και σε landscape κινητού, όχι μόνο σε στενή οθόνη.**
Ένα κινητό γυρισμένο πλάγια γίνεται ~844px πλατύ — ξεπερνά το
όριο των 768 — και επέστρεφε η διάταξη υπολογιστή: εμφανιζόταν η
πλευρική μπάρα και εξαφανιζόταν η πάνω μπάρα, μέσα στην ίδια
συσκευή, με μια περιστροφή (αναφορά χρήστη 03/09/2026).
Το `max-height` είναι το κριτήριο που ξεχωρίζει «κινητό πλάγια»
από «μικρό παράθυρο υπολογιστή»: ένα κινητό σε landscape έχει ύψος
~390–430px, ένα tablet ~820, ένας φορητός 700+. Το πλάτος μόνο του
δεν μπορεί να τα ξεχωρίσει. */
@media (max-width: 768px),
(orientation: landscape) and (max-height: 500px) {
.sidebar-show-pill { display: none !important; }
}
/* ── Main wrapper ─────────────────────────────────────────── */
.main-wrapper {
margin-left: var(--gary-sidebar-w);
flex: 1;
min-width: 0; /* flex items default σε min-width:auto — χωρίς αυτό, ένα φαρδύ
στοιχείο μέσα στο content-area αρνείται να μικρύνει και πλατύνει
όλο το body, σπρώχνοντας το fixed bottom nav εκτός οθόνης σε mobile */
display: flex;
flex-direction: column;
min-height: 100vh;
transition: margin-left .28s ease;
}
.main-wrapper.no-sidebar {
margin-left: 0;
}
/* ── Μπάρα «εκτός σύνδεσης» ── (αίτημα 17/09/2026)
`fixed` με `left: 0` και z-index 9998 πάνω από την πλευρική μπάρα
(1050): μετρημένο, σκέπαζε τα πρώτα 68px της ράγας — το λογότυπο
και το κουμπί ανοίγματος — ή όλα τα 220 της ανοιχτής μπάρας.
Ξεκινά εκεί που ξεκινά το περιεχόμενο, με την ίδια μεταβλητή και
την ίδια μετάβαση με το `.main-wrapper`.
⚠️ Μόνο όταν **υπάρχει** μπάρα: η μεταβλητή είναι 220px και στη
σελίδα σύνδεσης, που δεν έχει. */
#garyOfflineBanner { left: 0; transition: left .28s ease; }
body:has(#sidebar) #garyOfflineBanner { left: var(--gary-sidebar-w); }
@media (prefers-reduced-motion: reduce) { #garyOfflineBanner { transition: none; } }
/* ── Μηνύματα (flash): αιωρούνται στον κενό χώρο, δεν σπρώχνουν ──
Μέσα στη ροή, ένα μήνυμα 90px κατέβαζε τη σελίδα και, κλείνοντας,
την ανέβαζε ξανά (αναφορά ιδιοκτήτη 14/09/2026). Σε desktop ο κενός
χώρος πάνω από την κάρτα είναι 60px (padding του .content-area +
margin της κάρτας)· ένα μήνυμα μίας γραμμής με τη μικρότερη
εσωτερική απόσταση χωράει ολόκληρο εκεί.
⚠️ Η άγκυρα έχει **μηδενικό ύψος** και μένει στη θέση της μέσα στο
flex του .main-wrapper: με `position: absolute` στο ίδιο το
wrapper, το μήνυμα θα κάθονταν πάνω στη μπάρα των όρων χρήσης που
προηγείται. Η σκιά λέει ότι αιωρείται όταν, σε στενή οθόνη ή με
μεγάλο κείμενο, πέφτει πάνω στον τίτλο. */
.gary-flash-anchor {
position: relative;
height: 0;
z-index: 1020;
}
.gary-flash-stack {
position: absolute;
top: .5rem;
left: 0;
right: 0;
}
.gary-flash-stack .alert {
padding-top: .55rem;
padding-bottom: .55rem;
margin-bottom: .5rem;
box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.gary-flash-stack .alert-dismissible .btn-close {
padding: .8rem 1rem;
}
.content-area {
flex: 1;
min-width: 0; /* βλ. σχόλιο στο .main-wrapper */
padding: 2rem 1.5rem;
}
/* ── Ένδειξη δικτύου ──────────────────────────────────────
Μόνιμη και μικρή: η μπάρα εξηγεί, αλλά κλείνει και φεύγει με το
scroll· αυτό μένει. Σε αποθήκη με σήμα που πάει κι έρχεται, το «σε
ουρά: N» είναι η μόνη απόδειξη ότι η δουλειά δεν χάθηκε. */
.gary-net-chip {
display: none; align-items: center; gap: .3rem;
background: rgba(var(--bs-warning-rgb), .18); color: var(--bs-warning);
border: 1px solid rgba(var(--bs-warning-rgb), .45);
border-radius: 999px; padding: .15rem .5rem;
font-size: .7rem; font-weight: 600; text-decoration: none;
white-space: nowrap; flex-shrink: 0;
}
.gary-net-chip.is-visible { display: inline-flex; }
.gary-net-chip .queue-count {
background: var(--bs-warning); color: #1a1a2e;
border-radius: 999px; padding: 0 .35rem; font-size: .65rem;
}
.sidebar .gary-net-chip { margin: .35rem 1rem; }
/* ── Overlay (mobile) ─────────────────────────────────────── */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1040;
}
/* ── Responsive ───────────────────────────────────────────── */
/* ⚠️ **Και σε landscape κινητού, όχι μόνο σε στενή οθόνη.**
Ένα κινητό γυρισμένο πλάγια γίνεται ~844px πλατύ — ξεπερνά το
όριο των 768 — και επέστρεφε η διάταξη υπολογιστή: εμφανιζόταν η
πλευρική μπάρα και εξαφανιζόταν η πάνω μπάρα, μέσα στην ίδια
συσκευή, με μια περιστροφή (αναφορά χρήστη 03/09/2026).
Το `max-height` είναι το κριτήριο που ξεχωρίζει «κινητό πλάγια»
από «μικρό παράθυρο υπολογιστή»: ένα κινητό σε landscape έχει ύψος
~390–430px, ένα tablet ~820, ένας φορητός 700+. Το πλάτος μόνο του
δεν μπορεί να τα ξεχωρίσει. */
@media (max-width: 768px),
(orientation: landscape) and (max-height: 500px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.sidebar-open {
transform: translateX(0);
}
.sidebar-overlay.sidebar-open {
display: block;
}
:root { --gary-sidebar-w: 0px; }
.main-wrapper {
margin-left: 0;
}
/* Εδώ ισχύει πάντα η ανοιχτή μορφή, ό,τι κι αν λέει το data-sb. */
.sb-search input { font-size: 16px; }
.content-area {
padding: 1.25rem 1rem;
}
}
/* ── Cards & components ───────────────────────────────────── */
.card {
border: none;
border-radius: 1rem;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(5px);
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0,0,0,0.13);
}
.no-card-hover .card:hover {
transform: none;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
h2 { font-weight: 600; color: #2d3436; }
label { font-weight: 500; }
footer {
background: rgba(255,255,255,0.6);
text-align: center;
padding: 0.9rem;
font-size: 0.82rem;
color: #888;
border-top: 1px solid rgba(0,0,0,0.05);
}
/* ─────────────────────────────────────────────────────────────
BACK TO TOP — with a ring showing how far down the page you are.
Gary's green rather than the usual accent: it sits over content all
day, so it should read as part of the chrome, not as an action.
───────────────────────────────────────────────────────────── */
.back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 1rem; /* rounded square, like the cards */
background: #1e3a28;
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
/* Hidden until you have scrolled enough for it to be worth offering */
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s, transform .2s, visibility .2s;
z-index: 1035; /* under the toasts, over the content */
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: #27503a; }
.back-to-top:focus-visible { outline: 3px solid #7fb894; outline-offset: 2px; }
/* Both SVGs share the cell created by `place-items: center`, so the
arrow sits inside the ring without absolute positioning. */
.back-to-top > * { grid-area: 1 / 1; }
/* Geometry lives in the SVG attributes, not in CSS: `r`/`cx`/`cy` as CSS
properties are not universally supported, and the viewBox scales the
whole thing anyway — the mobile rule below only changes the box. */
.btt-ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.btt-ring circle {
fill: none;
stroke-width: 3;
stroke-linecap: round;
}
.btt-track { stroke: rgba(255,255,255,.28); }
.btt-progress {
stroke: #fff;
/* 2πr for r=19. Set here so the ring is correct before any script
runs; JS only moves the offset. */
stroke-dasharray: 119.38;
stroke-dashoffset: 119.38;
}
.btt-arrow { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5;
fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* The toast stacks live in the same corner. Lift them clear only while
the button is actually showing, so nothing moves on short pages. */
body.has-back-to-top #tourToastContainer { bottom: calc(1.2rem + 60px); }
/* Σε κινητό ανεβαίνουν **και τα δύο**: το ύψος της μπάρας συν το
κουμπί. Χωρίς αυτό, το `has-back-to-top` παραπάνω αντικαθιστά τον
κανόνα της μπάρας και το toast ξαναπέφτει πάνω της. */
@media (max-width: 767px) {
body.has-back-to-top #tourToastContainer {
bottom: calc(var(--gary-bottomnav-h, 76px) + 1.2rem + 60px + env(safe-area-inset-bottom, 0px));
}
}
/* ⚠️ 767px, όχι 576px. Η μπάρα εμφανίζεται ως τα 767 — ανάμεσα στα
577 και 767 το κουμπί καθόταν **πάνω** της. Ίδιο σφάλμα με τα
μηνύματα, σε άλλο στοιχείο: βρέθηκε ψάχνοντας για εκείνο. */
@media (max-width: 767px) {
.back-to-top {
right: 1rem;
bottom: calc(var(--gary-bottomnav-h, 76px) + .75rem + env(safe-area-inset-bottom, 0px));
width: 46px; height: 46px; border-radius: .85rem;
}
.btt-ring { width: 38px; height: 38px; }
.btt-arrow { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: none; }
}
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--bs-body-color); }
/* The separator is a pseudo-element so it can disappear when the links
drop onto their own line — a line starting with "·" reads as a typo. */
.footer-legal::before { content: " · "; }
@media (max-width: 480px) {
.footer-legal { display: block; margin-top: .25rem; }
.footer-legal::before { content: none; }
}
.list-group-item {
border: none !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.list-group-item:hover { background-color: #f8f9fa; }
/* Θέση κρατημένη για τη φωτογραφία του modal πληροφοριών.
Το JSON του αντικειμένου έρχεται ολόκληρο πριν ανοίξει το modal· αυτό που
αργεί είναι τα **bytes** της εικόνας. Ένα