/* ============================================================
Inter — self-hosted (public/fonts/), ΟΧΙ Google Fonts CDN (offline-first, ίδιο "όλα
τοπικά" convention με React/Babel/dnd-kit στο index.html). Επιλέχθηκε αντί για την
Hanken Grotesk του "Luminous Retail" design system γιατί η Hanken Grotesk δεν έχει
ελληνικούς χαρακτήρες στο Google Fonts — το ελληνικό κείμενο (η πλειοψηφία της
εφαρμογής) θα έπεφτε στο system fallback ούτως ή άλλως. Δύο αρχεία ανά βάρος (greek +
latin, ίδιο unicode-range split που χρησιμοποιεί ΚΑΙ η ίδια η Google) — ο browser
κατεβάζει μόνο το subset που πραγματικά χρειάζεται για το κείμενο της σελίδας.
============================================================ */
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
src: url('/fonts/inter-light-greek.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
src: url('/fonts/inter-light-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/inter-regular-greek.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/inter-regular-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/fonts/inter-semibold-greek.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/fonts/inter-semibold-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/fonts/inter-bold-greek.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/fonts/inter-bold-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
Design tokens — Light (default) + Dark (data-theme="dark") overrides.
Το topbar/nav-trigger/auth screens/tooltip ΜΕΝΟΥΝ σκούρα ανεξαρτήτου theme (μόνιμο
"chrome", ίδιο μοτίβο συνέπειας παντού) — δικά τους fixed tokens, δεν ακολουθούν το toggle.
Categorical/status χρώματα (πχ domain, division, pending-state) είναι named pairs
(bg/fg) ώστε μία αλλαγή τιμής να ενημερώνει ΟΛΕΣ τις χρήσεις τους μαζί.
============================================================ */
:root {
/* surfaces — "Luminous Retail" design system (redesign platform/luminous_retail/DESIGN.md),
Material-3-style surface/on-surface roles. "Airy" αισθητική: vast off-white foundation,
tonal shifts αντί για heavy borders. */
--bg: #f8f9fa; /* surface/background */
--panel: #ffffff; /* surface-container-lowest */
--panel-2: #f3f4f5; /* surface-container-low — nested/header/sticky/zebra surfaces */
--panel-3: #edeeef; /* surface-container — hover tint of panel-2 */
/* text */
--ink: #191c1d; /* on-surface */
--ink-soft: #4b4542; /* on-surface-variant, ελαφρώς πιο ουδέτερο από το raw token
(#5b403a ήταν πολύ καφέ για σώμα κειμένου) */
--muted: #5d5e61; /* secondary */
/* borders — σκόπιμα πολύ χαμηλής αντίθεσης (DESIGN.md: "λειτουργούν σαν οδηγός, όχι τοίχος") */
--line: #e7e8e9; /* surface-container-high */
--line-soft: #f3f4f5;
/* brand — "Public Orange" #F05023 (DESIGN.md prose) — ίδια οικογένεια με το ήδη υπάρχον
brand orange, ενοποιημένο accent/brand σε ένα seed αντί για δύο κοντινές αποχρώσεις. */
--accent: #f05023;
--accent-d: #ae2a00;
--accent-tint: #ffdbd1;
--brand: #f05023;
--brand-d: #ae2a00;
/* semantic status */
--ok: #12915a;
--ok-bg: #e3f6ec;
--danger: #c23a2e;
--danger-bg: #fbeae8;
--amber: #a5700f;
--amber-bg: #fdf1de;
--warn-bg: #fbeae8;
--teal: #0a7a7a;
--teal-bg: #e0f2f1;
/* categorical pairs — domain/division/status chips, reused across pills/borders/headers.
*-light variants: μεσαία απόχρωση για border-left accents (request-card) όπου το πλήρες
-bg (πολύ ανοιχτό) ή -fg (πολύ σκούρο/κορεσμένο) δεν έχουν αρκετή διαβάθμιση μεταξύ τους. */
--cat-blue-bg: #e5edfd; --cat-blue-fg: #2a52c9; --cat-blue-light: #7ea3ee;
--cat-orange-bg: #fdeee0; --cat-orange-fg: #b4620f; --cat-orange-light: #eda85f;
--cat-purple-bg: #f1e9fb; --cat-purple-fg: #7938c4;
--cat-teal-bg: #dff3f1; --cat-teal-fg: #0a7a72;
--cat-amber-bg: #fdf3da; --cat-amber-fg: #8a6608;
--cat-gray-bg: #eef0f4; --cat-gray-fg: #667089;
/* domain (display/feed) inline swatches — approvalPill gradient text, ξεχωριστά από τα
cat-blue/cat-orange παραπάνω γιατί οι αποχρώσεις είναι σκόπιμα λίγο πιο σκούρες
(χρειάζονται αντίθεση πάνω σε λευκό ως solid gradient background, όχι text-on-tint). */
--domain-display-fg: #2f52b3;
--domain-feed-fg: #b56419;
/* ομάδα καταστήματος (Orange/Orange+/White/White+, βλ. STORE_GROUP_COLOR στο app.jsx) —
4 σταθερά, διακριτά χρώματα, άσχετα με τα cat-* tokens παραπάνω (διαφορετική έννοια). */
--store-orange-fg: #e07b1a;
--store-orangeplus-fg: #d9b100;
--store-white-fg: #3f6fd1;
--store-whiteplus-fg: #8a4fd1;
/* pending/highlight matrix states — hand-picked, must stay distinct + legible */
--pending-bg: #fef2df;
--pending-row-hover: #fbe8c8;
--pending-submitted-bg: #e5edfd;
--pending-submitted-row-hover: #d5e2fa;
--pending-feed-bg: #fdeee0;
--pending-feed-row-hover: #fbdfc2;
--cluster-highlight-bg: #f1e9fb;
--cluster-highlight-fg: #7938c4;
/* overlay/shadow — "Ambient Shadows" (DESIGN.md Elevation & Depth): πολύ diffused, χαμηλής
έντασης, όχι σκληρή άκρη — level 1 (cards) πολύ ήπιο, level 2 (overlays/drawers) πιο
αισθητό. full box-shadow value strings ώστε opacity/color να διαφέρουν ανά theme. */
--overlay: rgba(25, 28, 29, 0.45);
--shadow-sm: 0 1px 2px rgba(25, 28, 29, 0.05);
--shadow-md: 0 8px 30px -6px rgba(25, 28, 29, 0.08);
--shadow-lg: 0 20px 60px -12px rgba(25, 28, 29, 0.16);
--shadow-drawer: -16px 0 48px rgba(25, 28, 29, 0.12);
/* fixed-dark tokens — chrome that never flips (tooltips, auth hero) — ΠΙΑ ΟΧΙ το topbar,
το νέο sidebar/header ακολουθούν κανονικά το theme (βλ. §3 του πλάνου). */
--ink-fixed: #12161f;
--ink-fixed-2: #1b202e;
/* type + spacing — Inter, self-hosted (βλ. @font-face block στην κορυφή του αρχείου) — ΟΧΙ
Hanken Grotesk (η DESIGN.md επιλογή) γιατί δεν έχει ελληνικούς χαρακτήρες στο Google Fonts.
System-font stack μένει ως fallback chain, όχι αντικαθίσταται. */
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* shapes — "Soft Roundedness" (DESIGN.md Shapes): 12px standard (ήταν 10), 16px μεγάλα
containers (ίδιο), + νέο xl (24px) και pill (999px, buttons/badges). */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* spacing scale — 4px base unit, + νέο 10/16 (40px/64px) για τα "airy" section gaps
(DESIGN.md spacing.lg/xl) που δεν υπήρχαν πριν. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-16: 64px;
}
/* Dark overrides — :root:not([data-theme="light"]) καλύπτει το "system" resolution
(prefers-color-scheme) όταν δεν έχει γίνει καμία ρητή επιλογή· :root[data-theme="dark"]
κερδίζει πάντα όταν ο χρήστης έχει επιλέξει ρητά dark, ανεξαρτήτου OS setting. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; }
:root:not([data-theme="light"]) {
/* "Luminous Retail" dark — σκούρο μπλε (variant 1/default, ζητήθηκε ρητά συγκεκριμένη
απόχρωση, όχι ουδέτερο γκρι — το γκρι ζει τώρα ως variant 3, βλ. [data-variant] blocks
πιο κάτω). --accent (Public Orange, primary-fixed-dim #ffb5a1) μένει ίδιο σε κάθε variant. */
--bg: #0a1420;
--panel: #101d2e;
--panel-2: #172940;
--panel-3: #1f3652;
--ink: #eef4fb;
--ink-soft: #b6c7dc;
--muted: #7f93ad;
--line: #28405e;
--line-soft: #182940;
--accent: #ffb5a1;
--accent-d: #ff9272;
--accent-tint: #3c1f16;
--brand: #ffb5a1;
--brand-d: #ff9272;
--ok: #3ecb84;
--ok-bg: #16321f;
--danger: #ff6b5c;
--danger-bg: #3a1c18;
--amber: #e0ab4f;
--amber-bg: #3a2c11;
--warn-bg: #3a1c18;
--teal: #3fd3c8;
--teal-bg: #123230;
--cat-blue-bg: #1c2b4d; --cat-blue-fg: #8fb0ff; --cat-blue-light: #5c85dd;
--cat-orange-bg: #402a15; --cat-orange-fg: #f5aa62; --cat-orange-light: #d18a42;
--cat-purple-bg: #2c1f45; --cat-purple-fg: #c8a3f5;
--cat-teal-bg: #0f2e2b; --cat-teal-fg: #5fe0d3;
--cat-amber-bg: #362a10; --cat-amber-fg: #f0c374;
--cat-gray-bg: #232a3a; --cat-gray-fg: #8b94a8;
--domain-display-fg: #7ea3ee;
--domain-feed-fg: #eda85f;
--store-orange-fg: #e0973f;
--store-orangeplus-fg: #e0c74a;
--store-white-fg: #7ea3ee;
--store-whiteplus-fg: #b48ceb;
--pending-bg: #362a10; --pending-row-hover: #453411;
--pending-submitted-bg: #1c2b4d; --pending-submitted-row-hover: #24355e;
--pending-feed-bg: #402a15; --pending-feed-row-hover: #4d331a;
--cluster-highlight-bg: #2c1f45; --cluster-highlight-fg: #c8a3f5;
--overlay: rgba(3, 4, 8, 0.68);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
--shadow-md: 0 10px 28px rgba(0, 0, 0, .55);
--shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
--shadow-drawer: -12px 0 40px rgba(0, 0, 0, .55);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0a1420;
--panel: #101d2e;
--panel-2: #172940;
--panel-3: #1f3652;
--ink: #eef4fb;
--ink-soft: #b6c7dc;
--muted: #7f93ad;
--line: #28405e;
--line-soft: #182940;
--accent: #ffb5a1;
--accent-d: #ff9272;
--accent-tint: #3c1f16;
--brand: #ffb5a1;
--brand-d: #ff9272;
--ok: #3ecb84;
--ok-bg: #16321f;
--danger: #ff6b5c;
--danger-bg: #3a1c18;
--amber: #e0ab4f;
--amber-bg: #3a2c11;
--warn-bg: #3a1c18;
--teal: #3fd3c8;
--teal-bg: #123230;
--cat-blue-bg: #1c2b4d; --cat-blue-fg: #8fb0ff; --cat-blue-light: #5c85dd;
--cat-orange-bg: #402a15; --cat-orange-fg: #f5aa62; --cat-orange-light: #d18a42;
--cat-purple-bg: #2c1f45; --cat-purple-fg: #c8a3f5;
--cat-teal-bg: #0f2e2b; --cat-teal-fg: #5fe0d3;
--cat-amber-bg: #362a10; --cat-amber-fg: #f0c374;
--cat-gray-bg: #232a3a; --cat-gray-fg: #8b94a8;
--domain-display-fg: #7ea3ee;
--domain-feed-fg: #eda85f;
--store-orange-fg: #e0973f;
--store-orangeplus-fg: #e0c74a;
--store-white-fg: #7ea3ee;
--store-whiteplus-fg: #b48ceb;
--pending-bg: #362a10; --pending-row-hover: #453411;
--pending-submitted-bg: #1c2b4d; --pending-submitted-row-hover: #24355e;
--pending-feed-bg: #402a15; --pending-feed-row-hover: #4d331a;
--cluster-highlight-bg: #2c1f45; --cluster-highlight-fg: #c8a3f5;
--overlay: rgba(3, 4, 8, 0.68);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
--shadow-md: 0 10px 28px rgba(0, 0, 0, .55);
--shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
--shadow-drawer: -12px 0 40px rgba(0, 0, 0, .55);
}
/* ---------- theme variants (3 βασικά χρώματα ανά mode, ζητήθηκε ρητά — genuinely distinct
hues, όχι απλά διαφορετική φωτεινότητα: light = λευκό (variant 1)/μπλε pop (2)/πράσινο pop
(3), dark = μπλε (variant 1, ήδη το base παραπάνω)/κυπαρίσι (2)/γκρι (3). ---------- */
/* [data-variant] υπάρχει μόνο μαζί με ρητό [data-theme] (applyThemeAttr στο app.jsx) — δεν
χρειάζεται να καλυφθεί το 'system' εδώ. Μόνο surface/text/border tokens αλλάζουν ανά variant
— accent (Public Orange) και semantic/status χρώματα (ok, danger, amber, teal, cat-x, domain-x,
store-x, pending-x) μένουν ΙΔΙΑ σε όλα τα variants, ίδιο brand identity/ήδη-συντονισμένη
παλέτα. variant 1 = χωρίς override (ήδη το base :root/[data-theme="dark"] παραπάνω). */
:root[data-theme="light"][data-variant="2"] {
--bg: #eaf2fc; --panel: #ffffff; --panel-2: #dbe9f8; --panel-3: #c2daf2;
--ink: #0f2038; --ink-soft: #35507a; --muted: #5c7aa3;
--line: #b3d0ec; --line-soft: #dbe9f8;
}
:root[data-theme="light"][data-variant="3"] {
/* "Πράσινο" (κυπαρίσι, ανοιχτό) */
--bg: #eaf6ee; --panel: #ffffff; --panel-2: #dbefe0; --panel-3: #c0e3c9;
--ink: #0e2418; --ink-soft: #2f5940; --muted: #547d63;
--line: #aedbba; --line-soft: #dbefe0;
}
:root[data-theme="dark"][data-variant="2"] {
/* "Κυπαρίσι" (σκούρο πράσινο) */
--bg: #0a160f; --panel: #0f2016; --panel-2: #16301f; --panel-3: #1e4029;
--ink: #edf7ef; --ink-soft: #b3ccb9; --muted: #7d9a84;
--line: #2a4a34; --line-soft: #183622;
}
:root[data-theme="dark"][data-variant="3"] {
/* "Γκρι" — ουδέτερο, χωρίς hue tint (αντίθετα με τα άλλα δύο dark variants) */
--bg: #17181a; --panel: #1e2021; --panel-2: #26282a; --panel-3: #2e3133;
--ink: #f0f1f2; --ink-soft: #c7cacc; --muted: #999c9e;
--line: #35383a; --line-soft: #27292b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
font-size: 14px;
line-height: 1.45;
letter-spacing: -.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background-color .15s ease, color .15s ease;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; margin: 0; }
::selection { background: var(--accent-tint); color: var(--accent-d); }
/* Γενικό utility — δευτερεύον/λιγότερο σημαντικό κείμενο (hints, disabled-reasons, notes),
used ελεύθερα σε drawers/pages χωρίς να χρειάζεται τοπικό scoped rule ανά χρήση. */
.muted { color: var(--muted); }
.boot { padding: 40px; color: var(--muted); }
/* Λεπτότερη, πιο σύγχρονη scrollbar σε webkit browsers — αφήνει το native OS scrollbar σε
Firefox/άλλα (καμία JS custom-scrollbar βιβλιοθήκη, καθαρό CSS-only enhancement). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
/* ---------- desktop-only gate ---------- */
#root { display: none; }
.desktop-gate { display: none; }
@media (min-width: 900px) {
#root { display: block; }
.desktop-gate { display: none; }
}
@media (max-width: 899px) {
.desktop-gate {
display: flex; min-height: 100vh; align-items: center; justify-content: center;
text-align: center; padding: 32px;
background: linear-gradient(135deg, var(--ink-fixed) 0%, var(--ink-fixed-2) 100%);
color: #fff;
}
.desktop-gate-inner { max-width: 360px; }
.desktop-gate-icon { font-size: 40px; margin-bottom: 14px; }
.desktop-gate-inner b { display: block; font-size: 18px; margin-bottom: 8px; }
.desktop-gate-inner p { font-size: 13.5px; line-height: 1.6; color: #c3ccdd; margin: 0; }
}
/* ---------- wordmark logo (μονοχρωματικό SVG, CSS mask αντί για ![]()
) ---------- */
/* Το /wordmark.svg είναι ένα ενιαίο path — με CSS mask (background-color: currentColor) το
χρώμα ελέγχεται 100% από το CSS `color` ανά context/theme, όχι δεμένο στο δικό του fill.
Πλατύ layout (viewBox ~4.67:1, wordmark όχι τετράγωνο icon) — width/height ρυθμίζονται
ξεχωριστά ανά χρήση (sidebar vs login hero) αντί για ένα κοινό μέγεθος. */
.wordmark {
display: inline-block; flex: none;
background-color: currentColor;
-webkit-mask-image: url(/wordmark.svg); mask-image: url(/wordmark.svg);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: left center; mask-position: left center;
}
/* Dedicated "P" glyph (δικό του καθαρό SVG, όχι crop του wordmark — βλ. .sidebar-logo-crop
παρακάτω) για το collapsed sidebar. */
.wordmark-p {
-webkit-mask-image: url(/logo-p.svg); mask-image: url(/logo-p.svg);
}
/* ---------- app shell: sidebar + header ---------- */
/* Κάθετο icon-rail sidebar αριστερά (collapsed 64px → expand σε 240px on hover, βλ. πλάνο §3)
αντί για το παλιό οριζόντιο .topbar. `position: fixed` + `overflow: hidden`· το expand ΔΕΝ
κάνει reflow στο περιεχόμενο, επικαλύπτει σαν flyout (ίδιο μοτίβο με τα mockups). Σε
αντίθεση με το παλιό μόνιμα-σκούρο topbar chrome, sidebar+header ακολουθούν τα ίδια tokens
με την υπόλοιπη σελίδα — ζητήθηκε ρητά "κράτα το dark mode", άρα πρέπει να το σέβονται
πλήρως, όχι να μείνουν fixed-dark. */
.app-shell { display: flex; min-height: 100vh; }
/* Καμία overflow:hidden στο .sidebar — το "κρύψιμο" των labels όταν το sidebar είναι collapsed
γίνεται ΣΤΟ ΙΔΙΟ το .sidebar-label (max-width 0 + overflow hidden, βλ. παρακάτω), όχι σε
κάποιον πρόγονο — έτσι δεν μένει ούτε αόρατο clickable dead-zone πάνω από το περιεχόμενο
(opacity:0 μόνο δεν θα αρκούσε, το layout box θα παρέμενε πλήρους πλάτους). */
/* Fixed, overlaps τη σελίδα κατά τα ~176px όταν είναι expanded on hover. */
.sidebar {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
width: 64px;
background: var(--panel);
border-right: 1px solid var(--line);
display: flex; flex-direction: column;
transition: width .16s ease, box-shadow .16s ease;
}
.sidebar:hover, .sidebar:focus-within { width: 240px; box-shadow: var(--shadow-lg); }
/* Edit mode (βλ. sidebar-brand long-press στο app.jsx): ζωγραφισμένο σαν να είναι πάντα σε
hover/expanded state (ίδιες τιμές με .sidebar:hover παραπάνω) — τα labels/drag handles/✕
χρειάζονται χώρο για να διαβαστούν, δεν έχει νόημα να μένουν κρυμμένα πίσω από ένα ξεχωριστό
hover ενώ ο χρήστης προσπαθεί να αναδιατάξει το μενού. */
.sidebar-editing { width: 240px; box-shadow: var(--shadow-lg); }
.sidebar-editing .sidebar-label { max-width: 160px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
.sidebar-brand {
display: flex; align-items: center; flex: none; gap: 10px;
height: 64px; padding: 0 20px; cursor: pointer;
border-bottom: 1px solid var(--line-soft);
}
/* Collapsed: δικό του καθαρό "P" glyph (.sidebar-logo-p, βλ. .wordmark-p) — ΟΧΙ πια crop του
πλατιού wordmark.svg (viewBox ~4.67:1, "Public" ολόκληρο), που ζορισμένο σε στενό κουτί έδειχνε
crop artifacts. Expanded (hover/focus-within/editing): cross-fade στο πλήρες wordmark (ίδιο
"cross-fade, όχι slide" micro-interaction convention με το υπόλοιπο app, βλ. π.χ. .autherr).
Τα δύο logos επικαλύπτονται absolute μέσα στο ίδιο σταθερού-ύψους "παραθυράκι". */
.sidebar-logo-crop { position: relative; overflow: hidden; height: 24px; width: 23px; flex: none; transition: width .2s ease; }
.sidebar:hover .sidebar-logo-crop, .sidebar:focus-within .sidebar-logo-crop, .sidebar-editing .sidebar-logo-crop { width: 112px; }
@media (prefers-reduced-motion: reduce) { .sidebar-logo-crop { transition: none; } }
.sidebar-logo-p, .sidebar-logo { position: absolute; top: 0; left: 0; height: 24px; color: var(--brand); flex: none; transition: opacity .15s ease; }
.sidebar-logo-p { width: 23px; }
.sidebar-logo { width: 112px; opacity: 0; }
.sidebar:hover .sidebar-logo-p, .sidebar:focus-within .sidebar-logo-p, .sidebar-editing .sidebar-logo-p { opacity: 0; }
.sidebar:hover .sidebar-logo, .sidebar:focus-within .sidebar-logo, .sidebar-editing .sidebar-logo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sidebar-logo-p, .sidebar-logo { transition: none; } }
/* overflow-y:auto — το μενού είναι πλέον ΕΝΑ επίπεδο flat nav (δεν χωρίζεται πια σε κύριο +
"Διαχείριση" dropdown), άρα μπορεί να έχει ως 11 items για super_admin· σε κοντό viewport
αυτό δεν πρέπει να κόβεται σιωπηλά. */
.sidebar-nav {
flex: 1; display: flex; flex-direction: column; gap: 2px;
padding: 10px; overflow-y: auto; overflow-x: hidden;
}
/* Δεύτερο .sidebar-nav (flex:none, μετά το πρώτο flex:1) — η Τεκμηρίωση μένει ΕΞΩ από το
reorder/hide pool (ζητήθηκε ρητά "να πάει κάτω στο μενού"), πάντα τελευταία, οπτικά
ξεχωριστή με ένα πάνω περίγραμμα. */
.sidebar-nav-bottom { flex: none; border-top: 1px solid var(--line-soft); padding-top: 10px; overflow: visible; }
.sidebar-item {
display: flex; align-items: center; gap: 14px; width: 100%; flex: none;
height: 40px; padding: 0 12px; border-radius: var(--radius-md);
border: none; background: none; cursor: pointer;
font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); white-space: nowrap;
text-decoration: none;
transition: background-color .12s ease, color .12s ease;
}
.sidebar-item:hover { background: var(--panel-2); color: var(--ink); }
.sidebar-item.active { background: var(--accent-tint); color: var(--accent-d); font-weight: 600; }
.sidebar-item-icon { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 20px; }
.sidebar-label {
display: inline-block; max-width: 0; overflow: hidden; opacity: 0;
transition: max-width .16s ease, opacity .1s ease;
}
.sidebar:hover .sidebar-label, .sidebar:focus-within .sidebar-label { max-width: 160px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sidebar-label { transition: none; } }
.navdrop-caret { margin-left: auto; font-size: 10px; }
/* Badge πάνω στη γωνία του icon (όχι δίπλα στο label) ώστε να μένει ορατό ΚΑΙ όταν το sidebar
είναι collapsed — πριν (οριζόντιο topbar) το badge ήταν πάντα ορατό μέσα στο tab, το ίδιο
πρέπει να ισχύει και εδώ χωρίς να χρειάζεται hover. */
.sidebar-badge { position: absolute; top: -6px; right: -9px; margin-left: 0; }
/* ---------- sidebar edit mode (reorder/hide, βλ. SidebarNavList/SidebarNavItem στο app.jsx) ---------- */
.sidebar-edit-hint {
flex: none; font-size: 11px; line-height: 1.5; color: var(--muted);
padding: 8px 14px; border-bottom: 1px solid var(--line-soft);
}
.sidebar-edit-hint b { color: var(--ink-soft); }
.sidebar-item-editable { cursor: default; gap: 10px; }
.sidebar-item-editable .sidebar-label { flex: 1; max-width: none; opacity: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item-editable.dragging { opacity: .5; background: var(--panel-2); }
.sidebar-draghandle {
flex: none; cursor: grab; color: var(--muted); font-size: 14px; line-height: 1;
padding: 2px; border-radius: 4px; touch-action: none; user-select: none;
}
.sidebar-draghandle:hover { color: var(--ink); }
.sidebar-draghandle:active { cursor: grabbing; }
.sidebar-item-hide {
flex: none; width: 20px; height: 20px; border-radius: 50%; border: none;
background: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background-color .12s ease, color .12s ease;
}
.sidebar-item-hide:hover { background: var(--danger-bg); color: var(--danger); }
.sidebar-hidden-tray {
flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 10px 12px; border-top: 1px solid var(--line-soft);
}
.sidebar-hidden-tray-label { width: 100%; font-size: 11px; color: var(--muted); }
.app-main { flex: 1; min-width: 0; margin-left: 64px; display: flex; flex-direction: column; min-height: 100vh; }
.app-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
height: 64px; padding: 0 28px;
background: var(--panel);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 20;
}
.app-header-title { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.app-header-title b { font-size: 15px; color: var(--ink); font-weight: 600; }
.app-header-actions { display: flex; align-items: center; gap: 10px; }
.header-iconbtn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 999px; border: none; background: none;
color: var(--ink-soft); cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.header-iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.header-badge { position: absolute; top: 2px; right: 2px; margin-left: 0; }
.app-content { flex: 1; min-width: 0; min-height: 0; }
.pill.role { background: var(--panel-3); color: var(--ink-soft); }
/* ---------- avatar + profile dropdown ---------- */
.avatar {
border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
flex: none; font-weight: 700; color: #fff; letter-spacing: .3px; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profilemenu { position: relative; }
.profilemenu-trigger {
border: none; background: none; padding: 4px 12px 4px 16px; border-radius: 999px; cursor: pointer;
display: flex; align-items: center; gap: 10px; transition: background-color .12s ease;
}
.profilemenu-trigger:hover { background: var(--panel-2); }
.profilemenu-trigger-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.profilemenu-trigger-name {
font-size: 13px; font-weight: 600; color: var(--ink); max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profilemenu-trigger-role { font-size: 11px; color: var(--muted); }
@keyframes profilemenu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.profilemenu-popover {
position: absolute; top: calc(100% + 10px); right: 0; width: 230px; z-index: 50;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-md); box-shadow: var(--shadow-md);
padding: 6px; display: flex; flex-direction: column; gap: 2px;
animation: profilemenu-in .15s cubic-bezier(.16, 1, .3, 1);
}
.profilemenu-header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.profilemenu-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profilemenu-header-text b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilemenu-header .pill.role { background: var(--teal-bg); color: var(--teal); }
.profilemenu-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; text-align: left; border: none; background: none; cursor: pointer;
padding: 8px; border-radius: 6px; font-size: 13px; color: var(--ink-soft); font-family: var(--sans);
transition: background-color .1s ease;
}
button.profilemenu-item:hover { background: var(--panel-3); }
.profilemenu-item.profilemenu-logout { color: var(--danger); }
.profilemenu-theme { cursor: default; }
/* ---------- notification bell (καμπανάκι, ίδιο open/close/position pattern με .profilemenu) ---------- */
.notifbell { position: relative; }
.notif-popover {
position: absolute; top: calc(100% + 10px); right: 0; width: 320px; z-index: 50;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-md); box-shadow: var(--shadow-md);
display: flex; flex-direction: column;
animation: profilemenu-in .15s cubic-bezier(.16, 1, .3, 1);
}
.notif-popover-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
}
.notif-list { max-height: 360px; overflow-y: auto; padding: 4px; }
.notif-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-item {
display: flex; align-items: flex-start; gap: 8px; padding: 9px 8px; border-radius: 6px;
cursor: pointer; transition: background-color .1s ease;
}
.notif-item:hover { background: var(--panel-3); }
.notif-item.unread { background: var(--accent-tint); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--accent-tint) 80%, var(--panel-3)); }
.notif-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.notif-dot-default { background: var(--accent); }
.notif-dot-ok { background: var(--ok); }
.notif-dot-bad { background: var(--danger); }
.notif-dot-warn { background: var(--amber); }
.notif-item-text { min-width: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.notif-item.unread .notif-item-text { color: var(--ink); font-weight: 600; }
.notif-item-time { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* Σταθερό κάτω-κάτω (ζητήθηκε ρητά) — sibling του .notif-list, ΕΞΩ από το scrollable, ίδιο
"fixed footer κάτω από scrollable body" μοτίβο με .drawer-foot. */
.notif-popover-foot { flex: none; padding: 8px; border-top: 1px solid var(--line-soft); }
.notif-popover-foot .btn { width: 100%; }
/* ---------- drawer section (βλ. ProfileDrawer ρυθμίσεις ειδοποιήσεων) ---------- */
.drawer-section { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; width: 100%; }
.drawer-section-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.drawer-section .toggle { display: flex; width: 100%; padding: 6px 0; }
.drawer-section .toggle:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
/* ---------- theme toggle (μέσα στο profile popover) ---------- */
.theme-toggle {
display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
padding: 2px; background: var(--panel-2); gap: 1px;
}
.theme-toggle-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border: none; border-radius: 999px; background: none;
color: var(--muted); cursor: pointer; line-height: 1; transition: background-color .12s ease, color .12s ease;
}
.theme-toggle-btn:hover { color: var(--ink); }
.theme-toggle-btn.active { background: var(--panel-3); color: var(--ink); }
.theme-toggle-btn svg { width: 14px; height: 14px; }
/* ---------- theme variant picker (3 βασικά χρώματα ανά mode, μέσα στο profile popover) ---------- */
/* Στατικά preview χρώματα (ΟΧΙ var(--x) — θα έδειχναν πάντα το ΤΡΕΧΟΝ theme, όχι μια
προεπισκόπηση της επιλογής), ίδιες τιμές με τα αντίστοιχα [data-variant] token overrides. */
.variant-picker { display: inline-flex; gap: 6px; }
.variant-swatch {
width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
border: 2px solid transparent; padding: 0; box-shadow: inset 0 0 0 1px var(--line);
transition: border-color .12s ease, transform .1s ease;
}
.variant-swatch:hover { transform: scale(1.08); }
.variant-swatch.active { border-color: var(--accent); }
.variant-swatch-light-1 { background: linear-gradient(135deg, #f8f9fa 50%, #ffffff 50%); }
.variant-swatch-light-2 { background: linear-gradient(135deg, #eaf2fc 50%, #c2daf2 50%); }
.variant-swatch-light-3 { background: linear-gradient(135deg, #eaf6ee 50%, #c0e3c9 50%); }
.variant-swatch-dark-1 { background: linear-gradient(135deg, #0a1420 50%, #1f3652 50%); }
.variant-swatch-dark-2 { background: linear-gradient(135deg, #0a160f 50%, #1e4029 50%); }
.variant-swatch-dark-3 { background: linear-gradient(135deg, #17181a 50%, #2e3133 50%); }
/* ---------- layout ---------- */
.page { padding: 20px 24px 64px; }
.toolbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.toolbar .grow { flex: 1; }
.toolbar.toolbar-toggles { margin-top: -8px; gap: 18px; }
/* "Clusters σε αναμονή δημιουργίας" (βλ. PendingClusterCreationsSection) — πάνω από τον κύριο
πίνακα Clusters, ίδια δομή/columns αλλά ξεχωριστό οπτικά ώστε να μη μπερδεύεται με τον κύριο
πίνακα (accent-colored border + τίτλος, ίδιο "κάτι εκκρεμεί εδώ" language με το accent-tint
background που ήδη χρησιμοποιείται αλλού για unread/pending state). */
.cluster-pending-section {
border: 1px solid var(--accent); border-radius: var(--radius-md);
background: var(--accent-tint); padding: 14px; margin-bottom: 20px;
}
.cluster-pending-section .toolbar, .cluster-pending-section .tablewrap { background: var(--panel); }
.cluster-pending-title { margin: 0 0 10px; font-size: 14px; color: var(--accent-d); }
/* ---------- Cluster ανά κατάστημα: head row πάνω από το matrix ---------- */
/* Τα φίλτρα/toggles ζουν πλέον σε modal drawer (.drawer-backdrop/.drawer, ίδιο με κάθε άλλο
drawer — ζητήθηκε ρητά "να βγαίνει πάνω από το περιεχόμενο και όχι να το πιέζει", ΟΧΙ docked
sidebar). Εδώ μένει μόνο η πάνω σειρά: "← Πίσω" / active cluster-filter chip αριστερά, το
"Φίλτρα & προβολή" trigger κουμπί δεξιά (ζητήθηκε ρητά η θέση).*/
.stores-main-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stores-main-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stores-filter-divider { height: 1px; background: var(--line-soft); margin: 2px 0; }
.stores-filter-toggles { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
input, select, textarea {
font-family: var(--sans); font-size: 13px; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 12px;
background: var(--panel); min-height: 36px;
transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); }
input.mono { font-family: var(--mono); }
.search { min-width: 240px; }
/* ImportPage CSV/JSON textarea — πριν δεν είχε όριο ύψους (μόνο rows=8 attribute) και ο
browser default resize:both επέτρεπε να τραβηχτεί αυθαίρετα ψηλό/πλατύ, "σπάζοντας" τη
σελίδα (ζητήθηκε ρητά να διορθωθεί). Standard, οθόνη-σχετικό ύψος (vh) + resize:vertical
μόνο μέσα σε λογικό max-height, πλάτος πάντα 100% του container (όχι πλατύτερο). */
textarea.import-textarea {
display: block; width: 100%; box-sizing: border-box;
font-family: var(--mono); font-size: 12.5px; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px;
background: var(--panel);
height: 32vh; min-height: 140px; max-height: 60vh;
resize: vertical; overflow-y: auto;
}
textarea.import-textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); }
/* Full-pill κουμπιά (Luminous Retail design system, "Components: Buttons: pill Public Orange
primary + ghost/soft-accent secondary") — ίδιο σχήμα σε primary/ghost/danger/sm, μόνο
χρώμα/βάρος διαφέρει ανά variant. */
button.btn {
font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
border-radius: var(--radius-pill); padding: 8px 16px; min-height: 34px;
transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
button.btn:hover { border-color: var(--muted); background: var(--panel-2); }
button.btn:active { transform: translateY(1px); }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
button.btn.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
button.btn.ghost { background: none; font-weight: 500; }
button.btn.ghost:hover { background: var(--panel-2); }
button.btn.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
button.btn.danger:hover { filter: brightness(0.9); }
/* Πράσινο, ίδιο pattern με .danger — χρήση: εικονίδιο ενέργειας "ενεργοποίηση" (βλ. Χρήστες). */
button.btn.success { color: #fff; background: var(--ok); border-color: var(--ok); }
button.btn.success:hover { filter: brightness(0.9); }
button.btn.sm { padding: 5px 12px; min-height: 28px; font-size: 12px; }
/* ΜΕΤΑ το .sm (ίδια specificity, το source order αποφασίζει) — αλλιώς το .sm's padding
νικάει το padding:0 εδώ, "σκάει" ένα icon-only button σε μη-τετράγωνο σχήμα. */
button.btn.icon-only {
display: inline-flex; align-items: center; justify-content: center;
padding: 0; width: 30px; flex: none;
}
button.btn.icon-only svg { flex: none; }
button.btn.icon-only.sm { width: 28px; }
button.btn:disabled { opacity: .5; cursor: default; transform: none; }
.info-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0 0 -3px;
border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.info-btn:hover { border-color: var(--accent); color: var(--accent); }
.count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip {
display: inline-block; font-family: var(--mono); font-size: 12px;
background: var(--teal-bg); color: var(--teal); border-radius: 5px;
padding: 2px 7px; font-weight: 600;
}
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.seg-btn {
font-family: var(--sans); font-size: 12px; cursor: pointer; padding: 6px 12px;
border: none; border-right: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--accent); color: #fff; }
/* ---------- toggle switch ---------- */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
width: 34px; height: 20px; border-radius: 20px; background: var(--line);
position: relative; transition: background .15s; flex-shrink: 0;
}
.toggle-thumb {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }
.toggle-label { font-size: 12px; color: var(--ink-soft); }
.pill { display:inline-block; font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600; }
/* Clickable pill (RequestBadgesRow) — ίδια εμφάνιση με ένα κανονικό .pill, μόνο reset των
browser-default