html, body {
    /* Ίδια γραμματοσειρά με το Delphi Sales (Segoe UI / Tahoma). */
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    /* Ενιαίο μέγεθος με το MudBlazor theme (ήταν 0.9 εδώ vs 0.82 στο Mud → ασυμφωνία). */
    font-size: 0.85rem;
}

a, .btn-link {
    color: #2B579A;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  /* Brand focus ring (ήταν bootstrap μπλε #258cfb — τώρα ταιριάζει με το CRM primary). */
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .35);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Ελληνικά: το MudBlazor εφαρμόζει text-transform: uppercase σε tabs/buttons.
   Στα ελληνικά το CSS uppercase ΚΡΑΤΑ τους τόνους (π.χ. "Γενικά" -> "ΓΕΝΙΚΆ"),
   που είναι τυπογραφικά λάθος. Το απενεργοποιούμε ώστε να εμφανίζονται όπως γράφτηκαν. */
.mud-tabs .mud-tab,
.mud-button-root {
    text-transform: none !important;
}

/* ================= Modern CRM design ================= */
:root {
    --crm-primary: #2456A6;
    --crm-primary-2: #3A7BD5;
    --crm-primary-soft: #E7F0FB;
    --crm-ink: #16233B;              /* deep navy για βάθος */
    --crm-bg: #EAF0F8;
    --crm-card: #FFFFFF;
    --crm-border: #DCE6F2;
    --crm-line: #E8EEF6;
    --crm-text: #1A2436;
    --crm-muted: #64748B;
    --crm-hover: #EDF4FD;
    --crm-selected: #DBE9FA;
    --crm-header: #EEF4FC;
    --crm-shadow: 0 1px 2px rgba(23,45,84,.05), 0 2px 6px rgba(23,45,84,.07);
    --crm-shadow-lg: 0 10px 30px rgba(23,45,84,.14), 0 3px 10px rgba(23,45,84,.08);
}

/* Πλούσιο φόντο με βάθος (soft gradient + λεπτά χρωματιστά blobs). */
html, body { color: var(--crm-text); }
/* Καμία οριζόντια «σελίδα-scroll»: τα πλατιά grids scroll ΕΣΩΤΕΡΙΚΑ (δικό τους container),
   η σελίδα ποτέ. Το overflow-x:hidden σε ancestor ΔΕΝ σπάει το εσωτερικό scroll των grids. */
/* overflow-x: clip (ΟΧΙ hidden): κόβει το οριζόντιο overflow ΧΩΡΙΣ να κάνει τα html/body
   scroll-containers. Το hidden ανάγκαζε το overflow-y σε «auto» και έβγαζε ΔΕΥΤΕΡΟ κάθετο
   scrollbar (html + body). Με clip μένει ένα (του viewport). */
html, body { overflow-x: clip; max-width: 100%; }
.page-ribbon { overflow-x: clip; max-width: 100vw; }
.content, main, article { min-width: 0; max-width: 100%; }
.mud-grid, .mud-paper, .mud-tabs, .mud-tabs-panels { max-width: 100%; }
/* ΕΞΑΙΡΕΣΗ: τα popovers (date pickers, menus) ζουν σε container με το πλάτος του activator·
   το max-width:100% εκεί ΚΟΒΕΙ το αναδυόμενο ημερολόγιο στο πλάτος του input (150px). */
.mud-popover .mud-paper, .mud-popover.mud-paper { max-width: none; }

/* ΔΙΠΛΗ ΜΠΑΡΑ ΚΥΛΙΣΗΣ στα dropdown: το MudBlazor βάζει max-height:300px + overflow-y:auto
   ΚΑΙ στο .mud-popover (inline style) ΚΑΙ στην εσωτερική .mud-list. Η λίστα κυλούσε κανονικά,
   ενώ το popover υπερχείλιζε κατά 2px (padding) κι έβγαζε δεύτερη, άχρηστη μπάρα δίπλα της.
   Λύση: μόνο το popover κυλάει· η λίστα ρέει ελεύθερα μέσα του.
   !important επειδή το MudBlazor.min.css φορτώνεται ΜΕΤΑ το app.css (βλ. App.razor). */
.mud-popover > .mud-list { max-height: none !important; overflow-y: visible !important; }
.mud-tabs-panels { min-width: 0; }
/* Κλικ στα tabs σε ΟΛΟ το ύψος τους: το περιεχόμενο του panel (MudGrid) έχει αρνητικό
   margin-top κι «ανέβαινε» ~24px πάνω στη μπάρα των tabs, κλέβοντας τα κλικ στο κάτω μισό
   κάθε tab (έπρεπε να στοχεύσεις το πάνω μέρος). z-index στη μπάρα → μένει πάνω & κλικάρεται. */
.mud-tabs-tabbar { position: relative; z-index: 1; }

/* ---------- Σελίδες εκτύπωσης (/print/*) ---------- */
/* Το «χαρτί» είναι ΠΑΝΤΑ λευκό με σκούρο κείμενο, ανεξάρτητα από dark/light theme. Χωρίς αυτό,
   σε dark mode το φόντο ήταν σκούρο ενώ το κείμενο σκούρο (#1f2430) → «χάνονταν» λέξεις, και ο
   τίτλος h1 έπαιρνε το ανοιχτό χρώμα του dark theme (ασυνέπεια). !important γιατί τα inline <style>
   των σελίδων φορτώνονται μετά το app.css. */
.card-doc, .print-doc, .letter-doc, .rep-doc {
    background: #fff !important;
    color: #1f2430 !important;
    border-radius: 10px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .22);
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}
/* Ο τίτλος να μη «κληρονομεί» το ανοιχτό χρώμα του dark theme πάνω στο λευκό χαρτί. */
.card-doc h1, .print-doc h1, .letter-doc h1, .rep-doc h1 { color: #1f2430 !important; }

@media print {
    /* Καθαρή εκτύπωση: λευκή σελίδα, χωρίς σκιά/περιθώρια, χωρίς το app chrome. */
    html, body { background: #fff !important; }
    .card-doc, .print-doc, .letter-doc, .rep-doc {
        box-shadow: none !important; border-radius: 0 !important; margin: 0 auto !important; max-width: none !important;
    }
    .top-row, .ribbon, .status-bar, #blazor-error-ui { display: none !important; }
}
img, svg { max-width: 100%; height: auto; }
body {
    background:
        radial-gradient(680px 460px at 8% 6%, rgba(58,123,213,.10), transparent 60%),
        radial-gradient(620px 480px at 96% 96%, rgba(128,90,213,.09), transparent 62%),
        linear-gradient(160deg, #EAF0F8 0%, #E3EBF6 55%, #EAF0F8 100%);
    background-attachment: fixed;
    min-height: 100vh;
}
a, .btn-link { color: var(--crm-primary); }

/* Κάρτες: το background έρχεται από την παλέτα του MudBlazor (theme-aware light/dark),
   εμείς βάζουμε border (mud lines) + σκιά για βάθος. */
.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--crm-shadow) !important;
    /* !important: το MudBlazor.min.css φορτώνεται ΜΕΤΑ το app.css και το δικό του
       «.mud-paper { transition: box-shadow }» έκοβε το transform — έτσι το hover-lift
       «κόλλαγε» (χωρίς ομαλή κίνηση). Με !important επιστρέφει η ομαλή 3D άνοδος. */
    transition: box-shadow .18s ease, transform .18s ease !important;
}
/* Το hover-lift ΜΟΝΟ σε πραγματικά διαδραστικές κάρτες (όχι κάθε στατικό panel —
   αλλιώς δίνει ψευδή αίσθηση «πατήσιμου» παντού). Οι κάρτες του dashboard (.dash-card)
   μπαίνουν ρητά εδώ ώστε να «σηκώνονται» όπως οι KPI κάρτες. */
.stat-card:hover, .landing-feat:hover, .mud-paper.interactive:hover, .dash-card:hover {
    box-shadow: var(--crm-shadow-lg) !important;
    transform: translateY(-3px);
}
.mud-popover { box-shadow: var(--crm-shadow-lg) !important; }

/* Δεξιά στοίχιση + tabular αριθμοί για στήλες χρημάτων/ποσοτήτων (money/qty). */
.num-cell, .num-cell .mud-table-cell-content { text-align: right; font-variant-numeric: tabular-nums; }
th.num-cell > .mud-table-header-sort-label { justify-content: flex-end; }

/* ---------- App bar (λευκή με λεπτή μπλε πινελιά) ---------- */
.page-ribbon > .top-row { position: relative; }
.top-row {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%) !important;
    border-bottom: 1px solid var(--crm-border);
    box-shadow: 0 2px 8px rgba(23,45,84,.06);
}
/* Το brand «Sales» ως κουμπί-logo προς την αρχική. */
.top-row a.app-title {
    display: inline-flex; align-items: center; font-weight: 800; font-size: 1.15rem;
    color: var(--crm-primary); text-decoration: none; cursor: pointer;
    padding: 4px 8px; margin-left: -8px; border-radius: 8px; transition: background .15s, filter .15s;
}
.top-row a.app-title:hover { background: var(--crm-primary-soft); filter: brightness(1.05); }
html[data-theme="dark"] .top-row a.app-title:hover { background: rgba(90,155,224,.14); }
/* Χρωματιστή λωρίδα-brand στην κορυφή. */
.top-row::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--crm-primary) 0%, var(--crm-primary-2) 50%, #805AD5 100%);
}

/* ---------- Ribbon navigation (τονισμένο, με βάθος) ---------- */
.ribbon { background: linear-gradient(180deg, #F4F8FE 0%, #EDF3FB 100%); border-bottom: 1px solid var(--crm-border); }
.ribbon-strip { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 8px; }
.rt-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.rt-label {
    padding: 11px 18px 9px; cursor: pointer; font-size: .84rem; font-weight: 600;
    color: var(--crm-muted); border-bottom: 2.5px solid transparent; user-select: none; line-height: 1.4;
    transition: color .15s ease, border-color .15s ease;
}
.rt-label:hover { color: var(--crm-primary); }
.rt-radio:checked + .rt-label { color: var(--crm-primary); border-bottom-color: var(--crm-primary); }

.ribbon-body {
    flex-basis: 100%; width: 100%; background: #FFFFFF; border-top: 1px solid var(--crm-line);
    /* min-height:auto αντί για σταθερό 86px — δεν κρατά νεκρό χώρο σε tabs με λίγα κουμπιά. */
    padding: 8px 14px; min-height: auto; overflow-x: auto;
}
.ribbon-page { display: none; gap: 6px; }
/* Ένα id ανά tab του Delphi ribbon· κάθε νέο tab θέλει και γραμμή εδώ. */
#rt-home:checked ~ .ribbon-body #rp-home,
#rt-sales:checked ~ .ribbon-body #rp-sales,
#rt-secr:checked ~ .ribbon-body #rp-secr,
#rt-sellers:checked ~ .ribbon-body #rp-sellers,
#rt-mgmt:checked ~ .ribbon-body #rp-mgmt,
#rt-mkt:checked ~ .ribbon-body #rp-mkt,
#rt-targets:checked ~ .ribbon-body #rp-targets,
#rt-bi:checked ~ .ribbon-body #rp-bi,
#rt-org:checked ~ .ribbon-body #rp-org,
#rt-ai:checked ~ .ribbon-body #rp-ai { display: flex; }

.ribbon-page { flex-wrap: wrap; align-items: stretch; }
.rgroup { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0 16px; border-right: 1px solid var(--crm-line); }
.rgroup:last-child { border-right: none; }
.rgroup-title { font-size: .66rem; color: #A0AEC0; margin-top: 6px; white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; }
/* Τα πυκνά groups (π.χ. admin «Πίνακες» με 16 κουμπιά) τυλίγονται αντί για ατέρμονο scroll. */
.rbtns { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; justify-content: center; }
.rbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 3px; padding: 7px 11px; min-width: 64px; border-radius: 10px;
    color: var(--crm-text); text-decoration: none; font-size: .72rem; text-align: center;
    transition: background .15s ease, color .15s ease;
}
.rbtn:hover { background: var(--crm-primary-soft); text-decoration: none; color: var(--crm-primary); }
.rbtn.active { background: var(--crm-primary); color: #fff; font-weight: 600; }
.rbtn .mud-icon-root { color: var(--crm-primary); }
.rbtn.active .mud-icon-root { color: #fff; }

/* Πλακίδια εφαρμογών Specisoft στην αρχική. Χρώματα μόνο από --crm-* → dark/light αυτόματα. */
.app-tile-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.app-tile {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    background: var(--crm-card); border: 1px solid var(--crm-border); border-radius: 10px;
    text-decoration: none; color: var(--crm-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.app-tile:hover {
    text-decoration: none; border-color: var(--crm-primary);
    box-shadow: var(--crm-shadow); transform: translateY(-1px);
}
.app-tile-icon { color: var(--crm-primary); flex: 0 0 auto; }
.app-tile-body { min-width: 0; }
.app-tile-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tile-sub { font-size: .74rem; color: var(--crm-primary); }

/* Grid με κλικ σε γραμμή → δείχνει ότι οι γραμμές είναι πατήσιμες. */
.grid-clickable tbody tr { cursor: pointer; }

/* Καρτέλα χρήστη */
.uc-lbl { color: var(--crm-text-secondary, var(--crm-muted)); width: 150px; white-space: nowrap; }
.uc-stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.uc-stat {
    padding: 12px 14px; border: 1px solid var(--crm-border); border-radius: 10px;
    background: var(--crm-card);
}
.uc-stat-hi { border-color: var(--crm-primary); background: var(--crm-primary-soft); }
.uc-stat-v { font-size: 1.35rem; font-weight: 700; color: var(--crm-text); font-variant-numeric: tabular-nums; }
.uc-stat-hi .uc-stat-v { color: var(--crm-primary); }
.uc-stat-l { font-size: .74rem; color: var(--crm-text-secondary, var(--crm-muted)); margin-top: 2px; }

/* Σελίδα «Ανά ρόλο»: κάρτες ρόλων. Όλα από μεταβλητές --crm-* ώστε να ακολουθούν dark/light. */
.role-card-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.role-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--crm-card); border: 1px solid var(--crm-border); border-radius: 12px;
    text-decoration: none; color: var(--crm-text); transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.role-card:hover {
    text-decoration: none; border-color: var(--crm-primary);
    box-shadow: var(--crm-shadow); transform: translateY(-1px);
}
.role-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
    background: var(--crm-primary-soft); color: var(--crm-primary);
}
.role-card-icon .mud-icon-root { color: var(--crm-primary); }
.role-card-body { flex: 1 1 auto; min-width: 0; }
.role-card-name { font-weight: 600; font-size: .95rem; color: var(--crm-text); }
.role-card-sub { font-size: .8rem; color: var(--crm-text-secondary, var(--crm-muted)); }
.role-card-active { color: var(--crm-primary); }
.role-card-count {
    flex: 0 0 auto; min-width: 34px; text-align: center;
    font-size: .95rem; font-weight: 700; padding: 4px 10px; border-radius: 10px;
    background: var(--crm-primary-soft); color: var(--crm-primary);
}

/* ---------- Page titles ---------- */
h1 {
    font-size: 1.55rem; font-weight: 800; color: var(--crm-ink);
    padding-bottom: 2px; margin-bottom: .5rem; display: flex; align-items: center; gap: 10px;
}
h1::before {
    content: ""; width: 5px; height: 1.35rem; border-radius: 3px;
    background: linear-gradient(180deg, var(--crm-primary-2), var(--crm-primary));
}
/* Ομάδα φίλτρων με τίτλο — το αντίστοιχο του Delphi TGroupBox στις φόρμες αναζήτησης. */
.filter-group {
    border: 1px solid var(--crm-border); border-radius: 8px;
    padding: 14px 12px 10px; position: relative;
}
.filter-group-title {
    position: absolute; top: -9px; left: 10px; padding: 0 6px;
    background: var(--crm-card); font-size: .7rem; font-weight: 700;
    color: var(--crm-primary); letter-spacing: .2px;
}
html[data-theme="dark"] .filter-group { border-color: #26324B; }
html[data-theme="dark"] .filter-group-title { background: #16213A; color: #82B6EC; }

/* Λίστα checkbox — το αντίστοιχο του Delphi TCheckListBox. Πολλαπλές στήλες ώστε να
   χωρούν πολλοί τύποι χωρίς ατέρμονο ύψος· ένας μόνο scroller. */
.checklist {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px;
    max-height: 168px; overflow-y: auto;
    border: 1px solid var(--crm-line); border-radius: 6px; padding: 6px 8px;
    background: var(--crm-card);
}
.checklist-item {
    display: flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: 4px;
    font-size: .8rem; cursor: pointer; min-width: 0; margin: 0;
}
.checklist-item:hover { background: var(--crm-hover); }
.checklist-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checklist-item input { accent-color: var(--crm-primary); cursor: pointer; flex: none; }
html[data-theme="dark"] .checklist { border-color: #26324B; background: #131E33; }
html[data-theme="dark"] .checklist-item:hover { background: #17233C; }

/* Κοινή κεφαλίδα σελίδας: τίτλος αριστερά, ενέργειες δεξιά — ίδια αίσθηση παντού. */
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 0; }
.page-head > :not(h1) { margin-left: auto; }

.section-title {
    font-weight: 700; color: var(--crm-ink); display: inline-flex; align-items: center; gap: 8px;
}
.section-title::before {
    content: ""; width: 4px; height: .95em; border-radius: 2px;
    background: linear-gradient(180deg, var(--crm-primary-2), var(--crm-primary));
}

/* ---------- Dashboard hero ---------- */
.dash-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--crm-primary) 0%, #3B82C4 55%, #5A9BD8 100%);
    color: #fff; border-radius: 16px; padding: 26px 30px; box-shadow: var(--crm-shadow-lg);
    display: flex; align-items: center; justify-content: space-between;
}
.dash-hero::before {
    content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
}
.dash-hero .dash-hello { color: #fff; font-weight: 800; letter-spacing: .2px; }
/* ΟΧΙ capitalize: κεφαλαιοποιούσε ΚΑΘΕ λέξη («Επισκόπηση Της Δραστηριότητάς Σου»)·
   το πρώτο γράμμα της ημέρας κεφαλαιοποιείται στον κώδικα. */
.dash-hero .dash-sub { color: rgba(255,255,255,.9); }
.dash-hero .dash-hero-icon { font-size: 3.4rem !important; color: rgba(255,255,255,.28); position: relative; }
.dash-tagline { display: flex; align-items: center; justify-content: center; gap: 18px; margin: -8px 0 18px; }
.dash-tagline .dash-rule { width: 4px; height: 28px; border-radius: 2px; background: var(--crm-primary); flex: 0 0 auto; }
.dash-tagline .dash-tagline-text { font-size: 1.15rem; font-weight: 700; color: var(--crm-text); text-align: center; }
html[data-theme="dark"] .dash-hero {
    background: linear-gradient(120deg, #1E3A5F 0%, #24466F 55%, #2C5488 100%);
}

/* ---------- Stat cards (KPI) ---------- */
.stat-card {
    border-radius: 16px !important; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
}
.stat-card:hover { box-shadow: var(--crm-shadow-lg) !important; transform: translateY(-3px); }
/* Κλικαρίσιμη κάρτα KPI: δείχνει «σύνδεσμο» + διακριτικό βελάκι που «ζωντανεύει» στο hover. */
.stat-card-link { cursor: pointer; user-select: none; }
.stat-card-link:hover .stat-card-chevron { transform: translateX(3px); opacity: 1; }
.stat-card .stat-card-chevron {
    padding: 0; background: none; box-shadow: none; width: auto; height: auto;
    color: var(--crm-text-secondary); opacity: .5; transition: transform .18s, opacity .18s;
}
.stat-card .mud-typography-h6 { font-weight: 800; font-size: 1.55rem; color: var(--crm-ink); }

/* Κλικαρίσιμες κάρτες dashboard (διάγραμμα/εορτολόγιο/εκκρεμότητες). */
.dash-card-link { cursor: pointer; }
.dash-card-chevron { color: var(--crm-text-secondary); opacity: .45; transition: transform .18s, opacity .18s, color .18s; }
/* Hover οπουδήποτε στην κάρτα → το βελάκι «ανάβει» στο χρώμα του τίτλου (λευκό σε dark). */
.dash-card-link:hover .dash-card-chevron { transform: translateX(3px); opacity: 1; color: var(--crm-ink); }

/* Πίνακας «Πωλήσεις ανά πωλητή» με 4 μετρήσεις (όλες/τιμολογημένες × καθαρή/μικτή). */
.dash-seller-wrap { overflow-x: auto; }
.dash-seller-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dash-seller-table th, .dash-seller-table td { padding: 5px 10px; text-align: right; white-space: nowrap; }
.dash-seller-table th.lft, .dash-seller-table td.lft { text-align: left; }
.dash-seller-table thead th { color: var(--crm-text-secondary); font-weight: 600; border-bottom: 1px solid var(--crm-border); }
.dash-seller-table thead th.grp { text-align: center; border-bottom: 2px solid var(--crm-primary); }
.dash-seller-table thead th.grp-inv { border-bottom-color: #805AD5; }
.dash-seller-table tbody td { border-bottom: 1px solid var(--crm-border); font-variant-numeric: tabular-nums; color: var(--crm-ink); }
.dash-seller-table td.lft { font-weight: 600; }
.dash-seller-table tbody td.inv { color: var(--crm-text-secondary); }
.dash-seller-table tbody tr:hover td { background: var(--crm-primary-soft); }
.dash-seller-table tr.tot td { border-top: 2px solid var(--crm-border); }
/* Σύγκριση περιόδων: χρωματιστή μεταβολή + τονισμένη γραμμή βάσης. */
.yoy-table tr.base-row td { background: var(--crm-primary-soft); font-weight: 600; }
.yoy-table td.delta-up { color: #2F855A; font-weight: 700; }
.yoy-table td.delta-down { color: #E53E3E; font-weight: 700; }
.yoy-table td.delta-flat { color: var(--crm-text-secondary); }
/* Η απόλυτη διαφορά κάτω από το ποσοστό: το ποσοστό μόνο κρύβει το μέγεθος. */
.yoy-table .delta-abs { display: block; font-size: .76rem; font-weight: 400; color: var(--crm-text-secondary); }

/* ---------- Πύλη (portal): κάρτες προγραμμάτων/φυλλαδίων/οδηγιών ---------- */
.portal-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.portal-card { display: flex; flex-direction: column; min-width: 0; }
.portal-title { font-weight: 700; color: var(--crm-ink); overflow-wrap: anywhere; }
/* Τα σχόλια του intranet είναι release notes πολλών γραμμών: κρατάμε τις αλλαγές γραμμής
   (pre-line) αλλά περιορίζουμε το ύψος ώστε οι κάρτες να μένουν ομοιόμορφες. */
.portal-descr {
    overflow-wrap: anywhere; white-space: pre-line;
    max-height: 8.5em; overflow-y: auto; line-height: 1.35;
}
.portal-descr::-webkit-scrollbar { width: 6px; }
.portal-descr::-webkit-scrollbar-thumb { background: var(--crm-border); border-radius: 3px; }
.portal-card .portal-icon { color: var(--crm-primary); }
.portal-inactive { opacity: .55; }

/* Donut chart + legend (SvgDonutChart). */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-svg { flex: none; }
.donut-total { font-size: 20px; font-weight: 800; fill: var(--crm-ink); }
.donut-legend { list-style: none; margin: 0; padding: 0; min-width: 180px; flex: 1; }
.donut-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .86rem; }
.donut-legend .dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.donut-legend .lbl { color: var(--crm-ink); }
.donut-legend .val { margin-left: auto; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-card .mud-icon-root {
    padding: 9px; border-radius: 13px; background: var(--crm-primary-soft);
    width: 44px; height: 44px; box-sizing: content-box;
    box-shadow: inset 0 0 0 1px rgba(36,86,166,.08);
}

/* ---------- Grids (καθαρά, με χρωματιστή κεφαλίδα) ---------- */
.delphi-grid { border-radius: 12px; border: 1px solid var(--crm-border); }
/* Πλατιά grids: horizontal scroll στο μικρό πλάτος αντί να σπάει το layout. */
.delphi-grid .mud-table-container { overflow-x: auto; }
.delphi-grid .mud-table-root { min-width: max-content; }
.delphi-grid .mud-table-cell {
    padding: 9px 14px; font-size: .82rem; border-right: none;
    border-bottom: 1px solid var(--crm-line);
}
.delphi-grid .mud-table-head .mud-table-cell {
    background: linear-gradient(180deg, var(--crm-header) 0%, #E6EFFA 100%); color: var(--crm-primary);
    /* ΟΧΙ uppercase: στα ελληνικά χαλά την αναγνωσιμότητα (τόνοι) — κρατάμε μόνο το tint/weight. */
    font-weight: 700; font-size: .74rem; letter-spacing: .2px;
    border-bottom: 2px solid var(--crm-border); white-space: nowrap;
}
.delphi-grid .mud-table-row:hover { background-color: var(--crm-hover) !important; cursor: pointer; }
.delphi-grid .mud-table-row.delphi-row-selected { background-color: var(--crm-selected) !important; }
.delphi-grid .mud-table-row.delphi-row-selected td { font-weight: 600; }
.delphi-grid .num { display: block; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Status bar «σαν το Delphi» ----------
   ΚΑΘΟΛΙΚΟ (όχι scoped): τα panels έρχονται από ΔΥΟ components — MainLayout και
   StatusBarInfo. Σε scoped αρχείο θα στυλίζονταν μόνο τα πρώτα. */
.status-bar {
    display: flex; align-items: center; height: 1.75rem;
    background: linear-gradient(180deg, #F2F6FC 0%, #E9EFF8 100%);
    border-top: 1px solid var(--crm-border);
    font-size: .74rem; color: #445064;
    position: sticky; bottom: 0; z-index: 1;
    /* ΟΧΙ clip εδώ: το badge του καμπανιού πρέπει να «βγαίνει» έξω από το λεπτό footer (23.8px)
       αλλιώς το «2» κοβόταν στη μέση. Η οριζόντια υπερχείλιση κόβεται ήδη από html,body {overflow-x:clip}·
       η κάθετη +1px λύθηκε στο .sb-panel (μικρότερο line-height ώστε να μη φτάνει το y=900.5). */
    overflow: visible;
}
.status-bar .sb-panel {
    padding: 0 .9rem; border-right: 1px solid var(--crm-border);
    white-space: nowrap; line-height: 1.5rem;   /* < ύψος footer (1.75rem): αλλιώς προεξείχε 0.5px → κάθετη μπάρα */
    overflow: hidden; text-overflow: ellipsis;
}
/* Το τελευταίο panel πριν το δεξί ακουμπά διαχωριστικό που δεν χρειάζεται. */
.status-bar .sb-panel:last-child { border-right: none; }
.status-bar .sb-right { margin-left: auto; border-right: none; padding-right: 1rem; }

/* Καμπανάκι ΔΕΞΙΑ από το copyright (το copyright κρατά το margin-left:auto· το bell ακολουθεί).
   Δεξί padding ώστε το badge να μένει ΜΕΣΑ στο viewport (αλλιώς προεξείχε → οριζόντια μπάρα). */
.status-bar .sb-bell { display: inline-flex; align-items: center; padding: 0 .9rem 0 .35rem; }
.status-bar .sb-bell .mud-icon-button { padding: 3px; }
.status-bar .sb-bell .mud-badge { --mud-badge-size: 15px; }

/* ---------- Κέντρο ειδοποιήσεων «σαν Windows 11» ---------- */
.hub-overlay { position: fixed; inset: 0; z-index: 1300; background: transparent; }
.hub-panel {
    position: fixed; right: 12px; bottom: 2.25rem; z-index: 1301;
    width: 370px; max-width: calc(100vw - 24px); max-height: min(72vh, 640px);
    display: flex; flex-direction: column;
    background: var(--crm-card); color: var(--crm-text);
    border: 1px solid var(--crm-border); border-radius: 14px;
    box-shadow: var(--crm-shadow-lg);
    overflow: hidden;
    animation: hub-slide-in .16s ease-out;
}
@@keyframes hub-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hub-panel-head { display: flex; align-items: center; padding: 10px 12px; gap: 2px; }
.hub-panel-title { font-weight: 700; font-size: .95rem; }
.hub-settings { padding: 6px 12px; background: var(--crm-hover); }
.hub-set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.hub-set-label { font-size: .82rem; font-weight: 600; }
.hub-set-sub { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.hub-panel-actions { display: flex; align-items: center; padding: 4px 8px; }
.hub-panel-list { overflow-y: auto; flex: 1; padding: 4px; }
.hub-panel-foot { display: flex; gap: 4px; padding: 6px 8px; }

.hub-empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 0; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.hub-empty .mud-icon-root { opacity: .5; }

.hub-card {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px;
    cursor: pointer; position: relative; transition: background .12s;
}
.hub-card:hover { background: var(--crm-hover); }
.hub-card:hover .hub-card-dismiss { opacity: 1; }
.hub-card-unread { background: var(--crm-primary-soft); }
.hub-card-icon { margin-top: 2px; flex: none; }
.hub-card-body { flex: 1; min-width: 0; }
.hub-card-title { font-size: .84rem; font-weight: 600; }
.hub-card-text { font-size: .78rem; color: var(--mud-palette-text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card-meta { font-size: .68rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.hub-card-dismiss { opacity: 0; transition: opacity .12s; }

html[data-theme="dark"] .hub-panel { background: #16213A; border-color: #26324B; }
html[data-theme="dark"] .hub-settings { background: #131E33; }
html[data-theme="dark"] .hub-card-unread { background: #17233C; }

/* Οι MudSimpleTable να δείχνουν σαν τα grids: ίδια κεφαλίδα, ίδιες γραμμές, hover. */
.mud-simple-table { border-radius: 10px; border: 1px solid var(--crm-border); overflow: hidden; }
.mud-simple-table table { border-collapse: collapse; }
.mud-simple-table thead th {
    background: linear-gradient(180deg, var(--crm-header) 0%, #E6EFFA 100%); color: var(--crm-primary);
    font-weight: 700; font-size: .74rem; letter-spacing: .2px;
    border-bottom: 2px solid var(--crm-border); white-space: nowrap; padding: 8px 14px;
}
.mud-simple-table tbody td { padding: 7px 14px; font-size: .82rem; border-bottom: 1px solid var(--crm-line); }
.mud-simple-table tbody tr:hover { background: var(--crm-hover); }

/* ---------- Επεξεργαστής κατανομών (KatanomiEditDialog) ---------- */
.katan-grid { max-height: 46vh; overflow-y: auto; border: 1px solid var(--crm-border); border-radius: 8px; }
.katan-table { width: 100%; border-collapse: collapse; }
.katan-table th, .katan-table td { padding: 3px 8px; border-bottom: 1px solid var(--crm-border); }
.katan-table thead th { position: sticky; top: 0; background: var(--crm-hover); z-index: 1; font-size: .8rem; }
.katan-table td.num, .katan-table th.num { text-align: right; width: 120px; }
.katan-num { max-width: 100px; margin-left: auto; }
.katan-sum td { font-weight: 700; background: var(--crm-hover); }
.katan-sum.ok td { color: var(--mud-palette-success); }
.katan-sum.bad td { color: var(--mud-palette-warning); }

/* ---------- Βάση γνώσης «Τεχνικές Πώλησης» ---------- */
.kb-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.kb-nav { position: sticky; top: 12px; max-height: calc(100vh - 160px); overflow-y: auto; }
.kb-item { cursor: pointer; border-radius: 6px; }
.kb-item:hover { background: var(--crm-hover); }
.kb-item-active { background: var(--crm-selected) !important; font-weight: 600; }
.kb-content { padding: 20px 24px; min-height: 300px; }
.kb-body { line-height: 1.65; font-size: .95rem; }
.kb-body p { margin: 0 0 12px; }
.kb-body ul { margin: 0 0 14px; padding-left: 20px; }
.kb-body li { margin-bottom: 6px; }
.kb-body .kb-note { color: var(--mud-palette-text-secondary); border-left: 3px solid var(--crm-border);
    padding-left: 10px; background: var(--crm-hover); border-radius: 4px; }
@media (max-width: 820px) { .kb-layout { grid-template-columns: 1fr; } .kb-nav { position: static; max-height: none; } }

/* ---------- Σελίδες Account (login/register/forgot) — καθαρή κεντρωμένη κάρτα, theme-aware ---------- */
.auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: calc(100vh - 120px); padding: 24px 16px; }
.auth-card {
    width: 100%; max-width: 420px; background: var(--crm-surface, #fff);
    border: 1px solid var(--crm-border); border-radius: 16px; padding: 32px 30px;
    box-shadow: var(--crm-shadow-lg, 0 12px 40px rgba(20,40,80,.12));
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 1.5rem; font-weight: 800; color: var(--crm-primary); letter-spacing: .3px; }
.auth-brand .bi { font-size: 1.5rem; }
.auth-sub { text-align: center; color: var(--crm-muted); margin: 4px 0 22px; font-size: .95rem; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--crm-muted); margin-bottom: 5px; }
.auth-card .form-control {
    width: 100%; padding: 11px 13px; border-radius: 10px; font-size: .95rem;
    border: 1px solid var(--crm-border); background: var(--crm-bg, #fff); color: var(--crm-text);
    transition: border-color .15s, box-shadow .15s;
}
.auth-card .form-control:focus { outline: none; border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(43,87,154,.15); }
.auth-remember { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px;
    font-size: .9rem; color: var(--crm-text); cursor: pointer; user-select: none; }
.auth-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(180deg, var(--crm-primary) 0%, #22467E 100%); color: #fff;
    font-size: 1rem; font-weight: 600; transition: filter .15s, transform .05s;
}
.auth-btn:hover { filter: brightness(1.07); }
.auth-btn:active { transform: translateY(1px); }
.auth-or { display: flex; align-items: center; text-align: center; color: var(--crm-muted); margin: 18px 0; font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--crm-line); }
.auth-or span { padding: 0 12px; }
.auth-passkey { display: block; width: 100%; padding: 10px; border-radius: 10px; text-align: center;
    border: 1px solid var(--crm-border); background: transparent; color: var(--crm-primary);
    font-weight: 500; text-decoration: none; cursor: pointer; }
.auth-passkey:hover { background: rgba(43,87,154,.06); }
.auth-links { text-align: center; margin-top: 18px; font-size: .9rem; }
.auth-links a { color: var(--crm-primary); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-footer { margin-top: 20px; color: var(--crm-muted); font-size: .8rem; }

/* ---------- Landing (μη-συνδεδεμένος επισκέπτης στο /) ---------- */
.landing { max-width: 1080px; margin: 0 auto; padding: 24px 12px 56px; }
.landing-hero { text-align: center; padding: 56px 20px 44px; position: relative; }
.landing-hero::before {
    content: ""; position: absolute; inset: -30px 8% auto 8%; height: 360px; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%, rgba(58,123,213,.20), transparent 70%);
}
.landing-hero > * { position: relative; z-index: 1; }
.landing-brand { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700;
    letter-spacing: .03em; color: var(--crm-primary); margin-bottom: 22px; padding: 6px 14px; border-radius: 999px;
    background: var(--crm-primary-soft); border: 1px solid var(--crm-border); }
.landing-hero h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 16px; color: var(--crm-text);
    line-height: 1.18; letter-spacing: -.01em; }
.landing-title { display: flex; align-items: center; justify-content: center; gap: 18px; }
.landing-title::before { content: none; }   /* καμία καθολική h1::before μπάρα — έχουμε δικές μας δεξιά/αριστερά */
.landing-title .landing-rule { width: 5px; height: 34px; border-radius: 3px; background: var(--crm-primary); flex: 0 0 auto; }
.landing-title > span:nth-child(2) { max-width: 640px; }
.landing-hero p { color: var(--crm-muted); font-size: 1.05rem; max-width: 620px; margin: 0 auto 24px; }
.landing-cta { display: inline-flex; align-items: center; padding: 12px 28px; border-radius: 10px;
    background: linear-gradient(180deg, var(--crm-primary) 0%, #22467E 100%); color: #fff !important;
    font-weight: 600; font-size: 1.05rem; text-decoration: none; box-shadow: var(--crm-shadow); transition: filter .15s; }
.landing-cta:hover { filter: brightness(1.08); }
.landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-cta-2 { display: inline-flex; align-items: center; padding: 12px 26px; border-radius: 10px;
    background: transparent; color: var(--crm-primary) !important; font-weight: 600; font-size: 1.05rem;
    text-decoration: none; border: 1px solid var(--crm-border); transition: background .15s; }
.landing-cta-2:hover { background: rgba(43,87,154,.07); }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 38px; }
.landing-feat { background: var(--crm-surface, #fff); border: 1px solid var(--crm-border); border-radius: 16px;
    padding: 26px 22px; text-align: center; box-shadow: var(--crm-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.landing-feat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23,45,84,.15); border-color: var(--crm-primary-2); }
.landing-feat .bi { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 16px; background: var(--crm-primary-soft); color: var(--crm-primary); font-size: 1.7rem; margin-bottom: 6px; }
.landing-feat h3 { font-size: 1.08rem; margin: 12px 0 6px; color: var(--crm-text); font-weight: 700; }
.landing-feat p { color: var(--crm-muted); font-size: .88rem; margin: 0; line-height: 1.5; }
html[data-theme="dark"] .landing-brand { background: rgba(90,155,224,.12); }
html[data-theme="dark"] .landing-feat .bi { background: rgba(90,155,224,.14); }

/* Dark surfaces για auth/landing (το --crm-surface δεν οριζόταν σε dark → λευκή κάρτα). */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .landing-feat { background: var(--crm-card); }
html[data-theme="dark"] .auth-card .form-control { background: #0E1626; }

/* ---------- Bootstrap components → theme-aware σε dark (σελίδες Account/Identity static-SSR) ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #0E1626; color: var(--crm-text); border-color: var(--crm-border);
}
html[data-theme="dark"] .form-control::placeholder { color: #64748B; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #0E1626; color: var(--crm-text); border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(90,155,224,.2);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item { background-color: var(--crm-card); border-color: var(--crm-border); color: var(--crm-text); }
html[data-theme="dark"] .card-header { background-color: #1A2842; border-color: var(--crm-border); color: var(--crm-text); }
html[data-theme="dark"] .bg-light { background-color: #1A2842 !important; color: var(--crm-text); }
html[data-theme="dark"] .table { color: var(--crm-text); border-color: var(--crm-border); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--crm-text); border-color: var(--crm-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--crm-hover); }
html[data-theme="dark"] .table-active > * { background-color: var(--crm-selected) !important; }
html[data-theme="dark"] .alert-info { background-color: #16283F; border-color: #24405F; color: #BCD8F5; }
html[data-theme="dark"] .alert-success { background-color: #14301F; border-color: #1F5236; color: #9BE3B8; }
html[data-theme="dark"] .alert-warning { background-color: #33280F; border-color: #5A4A1F; color: #F0D090; }
html[data-theme="dark"] .alert-danger { background-color: #3A1A1A; border-color: #6B2B2B; color: #F0A0A0; }
html[data-theme="dark"] .border { border-color: var(--crm-border) !important; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--crm-muted) !important; }
html[data-theme="dark"] .btn-outline-secondary { color: var(--crm-text); border-color: var(--crm-border); }
html[data-theme="dark"] code, html[data-theme="dark"] kbd { background-color: #1A2842; color: var(--crm-text); }
html[data-theme="dark"] hr { border-color: var(--crm-border); }

/* Section tabs καρτέλας πελάτη (χάθηκαν όταν το ribbon αντικατέστησε το sidebar). */
.csec-tabs {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
    background: var(--crm-header); border: 1px solid var(--crm-border); border-radius: 10px;
}
.csec-tab {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px;
    font-size: .82rem; color: var(--crm-text); text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.csec-tab:hover { background: rgba(43, 87, 154, .10); }
.csec-tab.active { background: var(--crm-primary); color: #fff; font-weight: 600; }
.csec-tab.active .mud-icon-root { color: #fff !important; }
.csec-ic { font-size: 1.05rem; }
html[data-theme="dark"] .csec-tab.active { background: #3A6FB5; }
@media (max-width: 760px) { .csec-tab { font-size: .76rem; padding: 5px 9px; } }

/* ---------- Toolbar ---------- */
.delphi-toolbar {
    background: linear-gradient(180deg, #F5F9FE 0%, #ECF3FC 100%); border: 1px solid var(--crm-border);
    border-radius: 12px; min-height: 2.6rem;
}

/* ---------- Buttons (μαλακά, μοντέρνα) ---------- */
.mud-button-root { border-radius: 10px !important; }
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover { box-shadow: 0 2px 8px rgba(43,108,176,.3) !important; }

/* ---------- Inputs ---------- */
.mud-input-control .mud-input.mud-input-outlined { border-radius: 10px; }

/* ---------- Customer-card side tabs ---------- */
.customer-tabs .mud-tabs-tabbar {
    background: linear-gradient(180deg, #F6F9FE 0%, #EFF4FC 100%);
    border-right: 1px solid var(--crm-border); min-width: 216px;
}
.customer-tabs .mud-tab {
    justify-content: flex-start; text-align: left; font-size: .9rem;
    border-radius: 10px; margin: 2px 8px; min-height: 40px; transition: background .15s ease;
}
.customer-tabs .mud-tab:hover { background-color: rgba(36,86,166,.06); }
.customer-tabs .mud-tab.mud-tab-active {
    background: linear-gradient(180deg, var(--crm-primary-2), var(--crm-primary));
    color: #fff !important; font-weight: 600; box-shadow: 0 3px 10px rgba(36,86,166,.28);
}
.customer-tabs .mud-tab.mud-tab-active .mud-icon-root { color: #fff !important; }

/* Χρωματιστό accent στην κορυφή κύριων panels (dashboard/filters). */
.content > .mud-grid .stat-card::after { content: none; }

/* ================= DARK MODE (html[data-theme="dark"] — instant, client-side) ================= */
html[data-theme="dark"] {
    color-scheme: dark;
    /* --crm vars */
    --crm-primary: #5A9BE0;
    --crm-primary-2: #82B6EC;
    --crm-primary-soft: #1C2B47;
    --crm-ink: #E6EDF6;
    --crm-card: #16213A;
    --crm-border: #26324B;
    --crm-line: #212F49;
    --crm-text: #E6EDF6;
    --crm-muted: #94A3B8;
    --crm-hover: #1C2A45;
    --crm-selected: #24365B;
    --crm-header: #1A2842;
    --crm-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.5);
    --crm-shadow-lg: 0 14px 36px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5);
    /* MudBlazor palette → components (dialogs/menus/inputs/tables) γίνονται dark αμέσως */
    --mud-palette-primary: #5A9BE0;
    --mud-palette-primary-rgb: 90,155,224;
    --mud-palette-secondary: #B794F4;
    --mud-palette-success: #68D391;
    --mud-palette-warning: #F6AD55;
    --mud-palette-error: #FC8181;
    --mud-palette-info: #5A9BE0;
    --mud-palette-dark: #0E1626;
    --mud-palette-surface: #16213A;
    --mud-palette-surface-rgb: 22,33,58;
    --mud-palette-background: #0E1626;
    --mud-palette-background-gray: #0B1220;
    --mud-palette-text-primary: #E6EDF6;
    --mud-palette-text-secondary: #94A3B8;
    --mud-palette-text-disabled: rgba(230,237,246,.4);
    --mud-palette-action-default: #94A3B8;
    --mud-palette-action-disabled: rgba(230,237,246,.3);
    --mud-palette-action-disabled-background: rgba(230,237,246,.12);
    --mud-palette-lines-default: #26324B;
    --mud-palette-lines-inputs: #33415E;
    --mud-palette-table-lines: #24304A;
    --mud-palette-divider: #26324B;
    --mud-palette-divider-light: rgba(230,237,246,.1);
    --mud-palette-drawer-background: #111A2B;
    --mud-palette-drawer-text: #CBD5E0;
    --mud-palette-appbar-background: #111A2B;
    --mud-palette-appbar-text: #E2E8F0;
}
html[data-theme="dark"] body, html[data-theme="dark"] .page-ribbon {
    background:
        radial-gradient(680px 460px at 8% 6%, rgba(58,123,213,.16), transparent 60%),
        radial-gradient(620px 480px at 96% 96%, rgba(128,90,213,.13), transparent 62%),
        linear-gradient(160deg, #0E1626 0%, #101A2E 55%, #0E1626 100%);
}
html[data-theme="dark"] .top-row {
    background: linear-gradient(180deg, #111A2B 0%, #0F1728 100%) !important;
    border-bottom-color: #26324B;
}
html[data-theme="dark"] .top-row .app-title { color: #82B6EC !important; }
html[data-theme="dark"] .top-row a, html[data-theme="dark"] .top-row .btn-link, html[data-theme="dark"] .top-row .theme-toggle { color: #94A3B8 !important; }
html[data-theme="dark"] .top-row a:hover, html[data-theme="dark"] .top-row .btn-link:hover { color: #82B6EC !important; }
html[data-theme="dark"] .ribbon { background: linear-gradient(180deg, #131E33 0%, #101A2E 100%); border-bottom-color: #26324B; }
html[data-theme="dark"] .ribbon-body { background: #101A2E; }
html[data-theme="dark"] .delphi-grid { border-color: #26324B; }
html[data-theme="dark"] .delphi-grid .mud-table-head .mud-table-cell {
    background: linear-gradient(180deg, #1B2A45 0%, #17233C 100%); color: #82B6EC; border-bottom-color: #2C3C59;
}
html[data-theme="dark"] .delphi-toolbar { background: linear-gradient(180deg, #16233C 0%, #131E33 100%); border-color: #26324B; }
html[data-theme="dark"] .mud-simple-table { border-color: #26324B; }
html[data-theme="dark"] .mud-simple-table thead th {
    background: linear-gradient(180deg, #1B2A45 0%, #17233C 100%); color: #82B6EC; border-bottom-color: #2C3C59;
}
html[data-theme="dark"] .mud-simple-table tbody td { border-bottom-color: #26324B; }
html[data-theme="dark"] .mud-simple-table tbody tr:hover { background: #17233C; }
html[data-theme="dark"] .status-bar { background: #111A2B !important; border-top-color: #26324B !important; color: #94A3B8 !important; }
html[data-theme="dark"] .status-bar .sb-panel { border-right-color: #26324B !important; }
html[data-theme="dark"] .status-bar .sb-panel:last-child,
html[data-theme="dark"] .status-bar .sb-right { border-right-color: transparent !important; }
html[data-theme="dark"] .stat-card { background: linear-gradient(180deg, #16213A 0%, #182642 100%) !important; }
html[data-theme="dark"] .customer-tabs .mud-tabs-tabbar { background: linear-gradient(180deg, #131E33 0%, #101A2E 100%); }
/* Theme toggle button */
.theme-toggle {
    background: none; border: none; cursor: pointer; padding: 5px; border-radius: 8px;
    display: inline-flex; align-items: center; transition: background .15s ease, transform .15s ease;
}
.theme-toggle:hover { transform: scale(1.1); background: var(--crm-primary-soft); }
.theme-toggle .mud-icon-root { color: var(--crm-primary); }
/* Δυναμική εναλλαγή εικονιδίου: light θέμα → φεγγάρι (πήγαινε dark)· dark θέμα → ήλιος. */
.theme-toggle .ic-light { display: none; }
.theme-toggle .ic-dark { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .ic-light { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .ic-dark { display: none; }

/* SVG chart — theme-aware (ώστε να φαίνεται σε dark). */
.svg-val { fill: var(--crm-text); }
.svg-cat { fill: var(--crm-muted); }
.svg-grid { stroke: var(--crm-line); }
.svg-axis { stroke: var(--crm-border); }

/* Θετικές/αρνητικές τιμές — theme-aware αντί για hardcoded σκούρα. */
.val-pos { color: #1E7E34; font-weight: 600; }
.val-neg { color: #C0392B; font-weight: 600; }
html[data-theme="dark"] .val-pos { color: #68D391; }
html[data-theme="dark"] .val-neg { color: #FC8181; }

/* ================= MOBILE / RESPONSIVE ================= */
@media (max-width: 760px) {
    /* App bar πιο συμπαγής· κρύβουμε το όνομα χρήστη (μένουν toggle + έξοδος). */
    .top-row { padding-left: .75rem !important; padding-right: .75rem !important; }
    .top-row .app-title { font-size: .98rem; }
    .top-row .top-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Ribbon tabs: πιο μικρά ώστε να χωρούν· horizontal scroll αν χρειαστεί. */
    .ribbon-strip { padding: 0 2px; }
    .rt-label { padding: 9px 12px 7px; font-size: .8rem; }
    .ribbon-body { padding: 8px 8px; min-height: 78px; }
    .rgroup { padding: 0 8px; }
    .rgroup-title { font-size: .6rem; }
    .rbtn { min-width: 54px; padding: 6px 6px; font-size: .66rem; }
    .rbtn .mud-icon-root { font-size: 1.15rem; }

    /* Περιεχόμενο & τίτλοι */
    .content { padding-left: .9rem !important; padding-right: .9rem !important; }
    h1 { font-size: 1.25rem; }
    .dash-hero { padding: 16px 18px; }

    /* Πυκνότερα grids σε κινητό */
    .delphi-grid .mud-table-cell { padding: 7px 9px; font-size: .78rem; }
    .stat-card .mud-typography-h6 { font-size: 1.25rem; }
    .delphi-toolbar { flex-wrap: wrap; }

    /* Καρτέλα πελάτη: στενότερο πλαϊνό μενού ώστε να μένει χώρος στο περιεχόμενο. */
    .customer-tabs .mud-tabs-tabbar { min-width: 150px !important; }
    .customer-tabs .mud-tab { font-size: .8rem; padding: 5px 8px; margin: 2px 4px; min-height: 36px; }
}

@media (max-width: 460px) {
    .rt-label { padding: 8px 9px 6px; font-size: .76rem; }
    /* Σε στενή οθόνη μένουν μόνο «Έκδοση» και το δεξί copyright — τα ενδιάμεσα δεν χωρούν. */
    .status-bar .sb-panel:not(:first-child):not(.sb-right) { display: none; }
    .status-bar .sb-panel { padding: 0 .6rem; }
}

/* Έγγραφα εκτύπωσης: πάντα σε λευκό χαρτί → σκούρα γράμματα ανεξ. θέματος. */
.rep-doc, .card-doc, .letter-doc {
    --crm-text: #1A202C; --crm-muted: #5A6472; --crm-line: #E0E6EF; --crm-border: #C9D0DA;
}

/* ---------- Ομαλή μετάβαση light↔dark ---------- */
body, .mud-paper, .top-row, .ribbon, .ribbon-body, .status-bar, .delphi-toolbar,
.stat-card, .rt-label, .rbtn, .customer-tabs .mud-tab, .mud-table-cell, .mud-input-slot,
.dash-hero, h1, .section-title, .mud-typography, .mud-nav-link {
    transition: background-color .35s ease, color .3s ease, border-color .35s ease, box-shadow .3s ease;
}
/* ---------- Error UI: σκούρα παραλλαγή (ήταν λευκό flash σε dark θέμα) ---------- */
html[data-theme="dark"] #blazor-error-ui {
    background: #2A1518; color: #FBD5D5; box-shadow: 0 -1px 8px rgba(0,0,0,.5);
}
html[data-theme="dark"] .blazor-error-boundary { background-color: #7A1F1F; }

/* ---------- .delphi-toolbar: λεπτή μπάρα εργαλείων πάνω από grids (αναφερόταν αλλά έλειπε) ---------- */
.delphi-toolbar {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--crm-header) 100%);
    border: 1px solid var(--crm-border); border-radius: 10px;
    padding: 2px 6px; min-height: 44px;
}
html[data-theme="dark"] .delphi-toolbar {
    background: linear-gradient(180deg, #16213A 0%, #121B2E 100%); border-color: #26324B;
}

/* ---------- Κοινό state-chip (κατάσταση παραστατικού) ---------- */
.state-chip { font-weight: 600; }

/* ---------- Cell με περιορισμένο πλάτος + ellipsis (π.χ. στήλη Σχόλιο) ---------- */
.cell-clip { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }