/* saas_sidebar.css — κανόνες .cfx-sb-* του πλαϊνού (μεταφέρθηκαν αυτούσιοι από το app.css) + λεμονοπράσινες λέξεις. Μεταβλητές --chrome-* στο :root του app.css. */
/* ========== CFX SIDEBAR (PR 1 - Skeleton) ========== */

body.cfx-sidebar-on {
  padding-left: 240px;
}

/* 🚨 ΥΨΟΣ: 100dvh, ΜΕ 100vh ως fallback (η σειρά μετράει — ο παλιός browser
   κρατά τη 2η δήλωση που καταλαβαίνει). Το 100vh στο κινητό Chrome είναι το
   LARGE viewport (μπάρα διεύθυνσης αποσυρμένη), άρα ο πάτος ενός position:fixed
   sidebar έπεφτε ~60-110px ΚΑΤΩ από την ορατή περιοχή: το πλακίδιο χρήστη
   (#cfx-sb-footer) και η γραμμή αποτυπώματος εξαφανίζονταν στην καρτέλα Chrome
   ενώ φαίνονταν κανονικά στην εγκατεστημένη PWA (standalone = καμία μπάρα).
   Το dvh παρακολουθεί το ΟΡΑΤΟ viewport, οπότε ο πάτος είναι πάντα εντός
   οθόνης. Μηδέν jank όσο το drawer είναι ανοιχτό: το
   body.cfx-sidebar-mobile-open{overflow:hidden} παγώνει τη μπάρα.
   Σε desktop dvh === vh — καμία οπτική διαφορά, ούτε σε collapsed state. */
.cfx-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  height: 100dvh;
  background: var(--chrome-bg);
  border-right: 1px solid var(--chrome-border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.cfx-sidebar-on .cfx-sidebar {
  display: flex !important;
}

.cfx-sb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--chrome-border);
}

.cfx-sb-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--cfx-mark-bg, var(--chrome-accent));
  color: var(--cfx-mark-fg, var(--chrome-avatar-text));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.cfx-sb-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cfx-sb-brand-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--chrome-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cfx-sb-brand-word {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.4px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.cfx-sb-nav {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
}

.cfx-sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 6px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 6px;
  font-size: 17px;
  color: var(--chrome-text-secondary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.cfx-sb-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--chrome-text);
}

.cfx-sb-item.active {
  background: var(--chrome-bg-active);
  color: var(--chrome-accent-text);
  border-left-color: var(--chrome-accent);
  font-weight: 500;
}

.cfx-sb-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* feat/sidebar-groups: όνομα που δεν χωράει σε μία γραμμή ΣΠΑΕΙ σε δύο και
   γράφεται ολόκληρο — ΠΟΤΕ αποσιωπητικά. Το πλάτος της στήλης (240px) δεν
   αλλάζει· το ύψος ΚΑΘΕ σειράς είναι ΣΤΑΘΕΡΟ (.cfx-sb-item height:52px, όχι
   min-height) ώστε μονόγραμμα ΚΑΙ δίγραμμα labels να έχουν το ΙΔΙΟ ύψος —
   αλλιώς το μενού θα έδειχνε ανομοιόμορφο μόνο στις γραμμές που διπλώνουν. */
.cfx-sb-label {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
}

/* feat/keep-screen-on-all-roles: «Να μένει ανοιχτή η οθόνη» — ΟΧΙ .cfx-sb-item
   (εκείνο έχει σταθερό height:52px, βλ. σχόλιο παραπάνω· εδώ χρειάζεται ΚΑΙ η
   επεξήγηση από κάτω, άρα ελεύθερο ύψος, ίδιο αριστερό/δεξί padding 12px). */
.cfx-sb-keep-screen { padding: 4px 12px 8px; margin-bottom: 2px; }
.cfx-sb-keep-screen-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 36px; cursor: pointer; color: var(--chrome-text-secondary); font-size: 15px;
}
.cfx-sb-keep-screen-hint {
  font-size: 11px; color: var(--chrome-text-muted); line-height: 1.3; padding-top: 2px;
}

.cfx-sb-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  position: relative; /* anchor για το impersonation popup (bottom:100%) */
}

/* «Προβολή ως Ρόλος» (role impersonation) — badge caret + popup προς τα πάνω +
   κίτρινη μπάρα ενεργής προβολής. Χτισμένο πάνω στα chrome tokens. */
.cfx-sb-user-caret { margin-left: auto; color: var(--chrome-text-muted); font-size: 11px; }
#impersonation-popup {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
  background: #0A3A66; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px; box-shadow: 0 -8px 26px rgba(0,0,0,0.4);
  padding: 6px; z-index: 1050;
}
#impersonation-popup .imp-pop-h {
  color: var(--chrome-text-muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 8px 4px;
}
#impersonation-popup .imp-pop-it {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: none; background: none; border-radius: 8px;
  color: #fff; font-size: 12.5px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-align: left;
}
#impersonation-popup .imp-pop-it:hover { background: rgba(151,196,89,0.20); }
/* feat/sidebar-declutter (14/09): «Νέα δαπάνη» + «Ο μήνας μου» μπήκαν στο ΙΔΙΟ
   popup, πάνω από «Προβολή ως ρόλος» (owner/Διαχ. Β μόνο — βλ. applyRoleUI() PR).
   Ίδιο .imp-pop-it (ίδιο padding/font-size/line-height με τις γραμμές ρόλων) —
   μόνο το φόντο διαφέρει στη «Νέα δαπάνη» (το ίδιο ροζ με το πρώην κουμπί του
   πλαϊνού, var(--red)). Ξεχωριστός :hover ΜΕΤΑ τον γενικό ώστε να μη γίνεται
   πράσινο στο hover (ίδια specificity, νικά η σειρά). -->
#impersonation-popup .imp-pop-it--expense { background: var(--red); }
#impersonation-popup .imp-pop-it--expense:hover { background: var(--red); }
#impersonation-popup .imp-pop-divider { height: 1px; background: rgba(255,255,255,0.14); margin: 6px 8px; }
/* feat/keep-screen-on-all-roles: «Να μένει ανοιχτή η οθόνη», κάτω από τη
   «Προβολή ως ρόλος» (owner/Διαχ. Β μόνο εδώ — κάθε άλλος ρόλος τη βλέπει
   στο πλαϊνό, .cfx-sb-keep-screen). Ίδιο .imp-pop-it (ίδιο ύψος γραμμής). */
#impersonation-popup .imp-pop-keep-screen-hint {
  color: var(--chrome-text-muted); font-size: 10.5px; padding: 0 8px 6px; line-height: 1.3;
}
#impersonation-bar {
  position: sticky; z-index: 199; /* top τίθεται από JS = ύψος του nav */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 16px; background: #F5B301; color: #3A2A00;
  font-size: 0.82rem; font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.14); box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
#impersonation-bar .imp-bar-lbl { display: flex; align-items: center; gap: 8px; margin-right: auto; }
#impersonation-bar .imp-bar-eye { font-size: 0.95rem; }
#impersonation-exit-btn {
  background: rgba(0,0,0,0.82); color: #fff; border: none; border-radius: 7px;
  padding: 4px 12px; font-size: 0.76rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
#impersonation-exit-btn:hover { background: #000; }
/* «Αλλαγή οδηγού» — δευτερεύον, πάνω στο κίτρινο (ξεχωρίζει από το μαύρο exit). */
#impersonation-change-driver-btn {
  background: rgba(0,0,0,0.12); color: #3A2A00; border: 1px solid rgba(0,0,0,0.30);
  border-radius: 7px; padding: 4px 12px; font-size: 0.76rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
#impersonation-change-driver-btn:hover { background: rgba(0,0,0,0.22); }

.cfx-sb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  color: var(--chrome-text);
}

.cfx-sb-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--chrome-text);
  line-height: 1.2;
}

.cfx-sb-user-role {
  font-size: 11px;
  color: var(--chrome-text-muted);
  line-height: 1.2;
  margin-top: 2px;
}

/* Phase 2 onsite-services: expandable sidebar group (accordion pattern).
   Parent header click toggles .open στο wrapper → children visible + arrow
   rotates 90°. feat/sidebar-groups: 16.5px (όχι 17px όπως τα plain top-level
   items) — μετρημένο (binary search σε live DOM): «Εξυπηρέτηση πελατών»
   χωράει σε μία γραμμή ΜΟΝΟ μέχρι 16.5px, στο 17px σπάει. Ίδιο μέγεθος με
   τα children (κάτω) για οπτική συνέπεια ανάμεσα στους δύο headers. */
.cfx-sb-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 6px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--chrome-text-secondary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.cfx-sb-group-header:hover { background: rgba(255,255,255,0.05); color: var(--chrome-text); }
/* Πλαϊνό 2: τα βελάκια των ομάδων δεν φαίνονται πουθενά· το γρανάζι των Ρυθμίσεων μόνο στο ανοιχτό πλαϊνό (το μαζεμένο το χρειάζεται). */
.cfx-sb-group-arrow { display: none; }
body:not(.cfx-sidebar-collapsed) #cfx-sb-settings-new .cfx-sb-icon { display: none; }
.cfx-sb-group-body { display: none; }
.cfx-sb-group.open .cfx-sb-group-body { display: block; }
/* feat/sidebar-groups: λεπτή κάθετη γραμμή-οδηγός αριστερά των children αντί
   για έντονη εσοχή (ήταν margin 21 + padding 13 = 34px, έκοβε μακριά labels
   όπως «Άμεση Παράδοση - Επιστροφές»). Τώρα 8+1+8=17px — μισό indent. Ο όρος
   άλλαξε: αποσιωπητικά ΔΕΝ επιτρέπονται πλέον πουθενά — ό,τι δεν χωράει σε
   μία γραμμή σπάει σε δύο (.cfx-sb-label, βλ. παραπάνω). Αφού τα emoji έφυγαν
   (μόνο το γρανάζι Ρυθμίσεων έμεινε), το font επανήλθε στο αρχικό 16.5px —
   ο ελεύθερος χώρος πήγε στο κείμενο, όχι μόνο στο διπλασιασμό γραμμών. */
.cfx-sb-group-body {
  margin-left: 8px;
  border-left: 1px solid var(--chrome-border);
}
.cfx-sb-group-body .cfx-sb-item {
  font-size: 16.5px;
  padding-left: 8px;
}
/* restricted-roles-nav-fix (βήμα 5): group με ΕΝΑ ορατό παιδί ισοπεδώνεται —
   ο header κρύβεται, το body φαίνεται ΠΑΝΤΑ (χωρίς toggle) και χάνει την
   εσοχή/γραμμή-οδηγό ώστε το μοναδικό παιδί να μοιάζει με κανονικό top-level
   στοιχείο. Toggle από τη syncSidebarGroupOrphan (JS, PR 3 sidebar). */
.cfx-sb-group.cfx-sb-flat > .cfx-sb-group-header { display: none; }
.cfx-sb-group.cfx-sb-flat > .cfx-sb-group-body {
  display: block;
  margin-left: 0;
  border-left: none;
}
.cfx-sb-group.cfx-sb-flat > .cfx-sb-group-body .cfx-sb-item {
  padding-left: 12px;
  font-size: 17px;
}

/* Κόκκινος μετρητής sidebar (ενεργές άμεσες). Styling κλωνοποιημένο από το
   τους άλλους κόκκινους μετρητές. Στο «Εργαστήριο» φαίνεται ΜΟΝΟ
   όταν το group είναι κλειστό — ανοιχτό, η πληροφορία ζει στο υπο-στοιχείο. */
.cfx-sb-count {
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  display: none;
  margin-left: auto;
  flex-shrink: 0;
}
#cfx-sb-lab-count { display: none !important; }

/* Phase 2 onsite — Τιμοκατάλογος row. Row-based card layout (ίδιο πνεύμα με
   το παλιό πελατολόγιο πριν το feat/pelatalogion-redesign) αλλά με drag handle
   αριστερά + price right-aligned σε Syne bold. Drag handle είναι visual-only
   σε Phase 2 (reorder via edit modal sort_order field). */
.service-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px;transition:border-color 0.2s}
.service-row:hover{border-color:var(--accent)}
.service-row.inactive{opacity:0.55}
.service-drag{color:var(--muted);font-size:1.05rem;cursor:grab;user-select:none;flex-shrink:0;line-height:1}
.service-info{flex:1;min-width:0}
.service-name{font-weight:700;font-size:0.92rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.service-type{font-size:0.76rem;color:var(--muted);margin-top:2px}
.service-price{font-family:Syne;font-weight:800;font-size:1rem;color:var(--accent);white-space:nowrap}
.service-actions{display:flex;gap:6px;flex-shrink:0}
.service-sys-badge{font-size:0.65rem;background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:1px 6px;border-radius:10px;font-weight:600}

/* PR-2 (pickup-purposes) — list row με ▲/▼ reorder buttons + read-only
   active indicator. Pattern parallel με .service-row αλλά χωρίς price column.
   ▲/▼ stack αριστερά, name flex-1, active visual indicator, edit/delete στο τέλος. */
.pp-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px;transition:border-color 0.2s}
.pp-row:hover{border-color:var(--accent)}
.pp-row.inactive{opacity:0.55}
.pp-arrows{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.pp-arrow-btn{background:var(--surface2);border:1px solid var(--border);border-radius:6px;width:26px;height:20px;font-size:0.7rem;color:var(--text);cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s}
.pp-arrow-btn:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.pp-arrow-btn:disabled{opacity:0.3;cursor:not-allowed}
.pp-name{flex:1;min-width:0;font-weight:600;font-size:0.92rem;overflow-wrap:break-word}
.pp-active-indicator{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:0.72rem;color:var(--muted);user-select:none}
.pp-active-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex-shrink:0}
.pp-active-indicator.is-on .pp-active-dot{background:#27ae60}
.pp-active-indicator.is-on{color:#27ae60}
.pp-actions{display:flex;gap:6px;flex-shrink:0}
.pp-help-text{font-size:0.78rem;color:var(--muted);margin-top:14px;padding:10px 12px;background:var(--surface2);border-radius:8px;line-height:1.5}

/* Phase 2 onsite — Visit modal line rows + picker.
   Line row: name flex-1, type badge, qty/price inputs right-aligned, ✕ remove.
   Picker: inline expandable list of active services κάτω από το "+ Προσθήκη". */
.ov-line{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 10px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ov-line-name{flex:1;min-width:0;font-weight:600;font-size:0.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-line-type{font-size:0.68rem;background:var(--surface2);color:var(--muted);padding:1px 6px;border-radius:8px;flex-shrink:0}
.ov-line-qty{width:56px;flex-shrink:0}
.ov-line-price{width:80px;flex-shrink:0}
.ov-line-qty input,.ov-line-price input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:5px 7px;font-size:0.82rem;text-align:right;outline:none;box-sizing:border-box;font-family:inherit}
.ov-line-price.readonly{font-family:Syne;font-weight:700;color:var(--accent);font-size:0.85rem;text-align:right}
.ov-line-hint{font-size:0.7rem;color:var(--muted);font-style:italic;width:80px;text-align:right;flex-shrink:0}
.ov-line-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:0.95rem;padding:2px 6px;flex-shrink:0;line-height:1}
.ov-line-remove:hover{color:#8c1a40}
.ov-picker-item{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:0.85rem;transition:background 0.1s}
.ov-picker-item:hover{background:var(--surface2)}
.ov-picker-type{font-size:0.68rem;background:var(--surface2);color:var(--muted);padding:1px 5px;border-radius:6px;flex-shrink:0}
.ov-picker-price{margin-left:auto;font-family:Syne;font-weight:700;color:var(--accent);font-size:0.82rem;flex-shrink:0}

/* Phase 2L PR 3: mobile hamburger + drawer backdrop. Base rules
   (always present in DOM). Το hamburger εμφανίζεται μόνο ≤768px μέσω
   του @media block παρακάτω. Backdrop ζει σε z-index:998 (κάτω από το
   sidebar z-index:1000) και εμφανίζεται μόνο όταν body.cfx-sidebar-mobile-open. */
.cfx-sb-hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
}
.cfx-sb-hamburger:hover { background: rgba(255,255,255,0.08); }
.cfx-sb-hamburger:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.cfx-sb-hamburger span {
  width: 20px;
  height: 2px;
  background: var(--chrome-text);
  display: block;
  border-radius: 2px;
}
.cfx-sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
}

/* PR 3.2d: Collapsible sidebar — desktop only.
   Default state = collapsed (set by saas_api.js boot before /me sync).
   Mobile (≤768px) overrides: collapsed class becomes no-op, drawer takes over. */
.cfx-sidebar { transition: width 150ms ease; }
body.cfx-sidebar-on { transition: padding-left 150ms ease; }

body.cfx-sidebar-collapsed .cfx-sidebar { width: 48px; }
body.cfx-sidebar-collapsed.cfx-sidebar-on { padding-left: 48px; }

/* C3: Modal overlay alignment με sidebar. Το .modal-overlay είναι
   position:fixed; inset:0 — αγνοεί το body padding-left, οπότε το αριστερό
   του άκρο (date field, στάσεις, footer στο modal-route-builder) κρυβόταν
   κάτω από το .cfx-sidebar (z-index 1000 > overlay 500). Offset του left
   ώστε overlay + backdrop να ξεκινούν μετά το sidebar. Τα modals είναι
   width:100% του overlay με max-width — απλά συρρικνώνονται, κανένα overflow. */
body.cfx-sidebar-on .modal-overlay { left: 240px; transition: left 150ms ease; }
body.cfx-sidebar-collapsed.cfx-sidebar-on .modal-overlay { left: 48px; }

body.cfx-sidebar-collapsed .cfx-sb-label,
body.cfx-sidebar-collapsed .cfx-sb-brand-name,
body.cfx-sidebar-collapsed .cfx-sb-brand-word,
body.cfx-sidebar-collapsed .cfx-sb-user-name,
body.cfx-sidebar-collapsed .cfx-sb-user-role {
  display: none;
}

/* Dropdown item: αριστερή χρωματιστή λωρίδα ανά event. */
.cfx-bell-item { border-left: 3px solid transparent; }
.cfx-bell-item--green { border-left-color: #1f9d55; }
.cfx-bell-item--red { border-left-color: #e24b4a; }

body.cfx-sidebar-collapsed .cfx-sb-item,
body.cfx-sidebar-collapsed .cfx-sb-group-header {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Collapsed: μόνο εικονίδια — η εσοχή/γραμμή-οδηγός του submenu θα μετατόπιζε
   τα children εκτός κέντρου. */
body.cfx-sidebar-collapsed .cfx-sb-group-body {
  margin-left: 0;
  border-left: 0;
}

body.cfx-sidebar-collapsed .cfx-sb-icon {
  margin: 0;
}

body.cfx-sidebar-collapsed .cfx-sb-header,
body.cfx-sidebar-collapsed .cfx-sb-footer {
  padding-left: 4px;
  padding-right: 4px;
}

/* PR 3.2d: Toggle button (top-left, στο cfx-sb-header). */
.cfx-sb-collapse-btn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0.5px solid var(--chrome-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--chrome-text);
  flex-shrink: 0;
}
.cfx-sb-collapse-btn:hover { background: rgba(255,255,255,0.05); }


/* Χρώματα 3: λεμονοπράσινη ΛΕΞΗ σε τρεις καταχωρήσεις (index.html: #cfx-sb-group-pelatologio,
   #cfx-sb-group-lab, #cfx-sb-settings-new). Μόνο το .cfx-sb-label: βελάκι και εικονίδιο κρατούν
   το χρώμα τους. Επιλεγμένη γραμμή (.active) = η όψη της επιλεγμένης (.cfx-sb-item.active). */
#cfx-sb-group-pelatologio > .cfx-sb-group-header .cfx-sb-label,
#cfx-sb-group-lab > .cfx-sb-group-header .cfx-sb-label,
#cfx-sb-settings-new:not(.active) .cfx-sb-label {
  color: var(--chrome-lime);
}