/* =============================================================================
   Εν Όψει — ό,τι δεν καλύπτει το θέμα του MudBlazor
   =============================================================================
   Τα χρώματα δεν ορίζονται εδώ. Έρχονται από τις μεταβλητές --mud-palette-*, που
   τις παράγει το EnopsiTheme μέσω του MudThemeProvider. Έτσι η εναλλαγή φωτεινού/
   σκοτεινού θέματος αλλάζει *ένα* πράγμα, και δεν υπάρχει δεύτερη παλέτα να ξεχαστεί
   εκτός συγχρονισμού.

   Ό,τι μένει εδώ είναι δικό της: αριθμοί με σταθερό πλάτος, οι κάρτες KPI, οι
   μπάρες μεριδίου, η χρονοσήμανση, η οθόνη φόρτωσης.
   ========================================================================== */

/* Τα ποσά στοιχίζονται κάθετα μόνο με tabular figures — αλλιώς οι στήλες
   «χορεύουν» και η σύγκριση με το μάτι γίνεται αδύνατη. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ta-right { text-align: right; }
.ta-left  { text-align: left; }
.muted    { color: var(--mud-palette-text-secondary); }

/* ── Σήμα ───────────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
}

/* Η μπάρα και το συρτάρι είναι δύο επιφάνειες που ακουμπούν: χωρίς γραμμή μεταξύ τους
   το περιεχόμενο μοιάζει να κρέμεται. */
.enopsi-appbar { border-bottom: 1px solid var(--mud-palette-divider); }

.appbar-brand { margin-right: 1.25rem; }

.enopsi-company { max-width: 22rem; }

/* ── Σήμα εταιρείας ─────────────────────────────────────────────────────── */

.enopsi-company-picker {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}

/* Το avatar δεν συμπιέζεται όταν στενεύει η μπάρα: αν ζαρώσει, γίνεται μια γκρίζα
   κηλίδα — χειρότερη από το να μη βρίσκεται εκεί. Στενεύει το πεδίο, όχι το σήμα. */
.appbar-company-avatar { flex: 0 0 auto; }

/* Το logo μπαίνει ολόκληρο μέσα στον κύκλο (contain) και όχι κομμένο: τα σήματα
   εταιρειών είναι συνήθως πλατιά, και το cover θα έκοβε τα άκρα του ονόματος. */
.company-avatar .mud-image {
  width: 100%;
  height: 100%;
  padding: 2px;
}

.company-avatar {
  font-weight: 600;
  letter-spacing: .02em;
}

/* Στοιχείο του μενού: σήμα, μετά όνομα. Το όνομα κόβεται με αποσιωπητικά αντί να
   σπρώξει το μενού σε πλάτος που δεν χωράει σε κινητό. */
.company-option {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}

.company-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Χωρίς αυτό το flex item αρνείται να συρρικνωθεί κάτω από το περιεχόμενό του, και το
   ellipsis του ονόματος δεν ενεργοποιείται ποτέ. */
.mw-0 { min-width: 0; }

/* Το πεδίο logo στον διάλογο: προεπισκόπηση αριστερά, ενέργειες δεξιά. */
.logo-field {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.logo-field-hint {
  flex-basis: 100%;
  font-size: .75rem;
}

/* ── Χρώμα εταιρείας ────────────────────────────────────────────────────── */

.theme-field-label {
  font-size: .75rem;
  color: var(--mud-palette-text-secondary);
  margin-bottom: .375rem;
}

.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Το δείγμα είναι κουμπί και όχι κουτάκι επιλογής: το χρώμα *είναι* η ετικέτα του. Το
   περίγραμμα εστίασης μένει — είναι ο μόνος τρόπος να το βρει κανείς με πληκτρολόγιο. */
.theme-swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

.theme-swatch:hover { transform: scale(1.08); }

.theme-swatch.is-chosen {
  border-color: var(--mud-palette-surface);
  box-shadow: 0 0 0 2px var(--swatch);
}

.theme-field-hint {
  font-size: .75rem;
  margin-top: .5rem;
}

/* Το υποσέλιδο του συρταριού πέφτει στον πάτο μόνο αν το περιεχόμενο είναι στήλη. */
.mud-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Το σήμα είναι SVG (Components/BrandMark.razor): το μέγεθος έρχεται από τα δικά του
   width/height, εδώ μένει μόνο ό,τι αφορά τη θέση του δίπλα στο όνομα. */
.brand-mark {
  display: block;
  flex: none;
}

.brand-name { font-weight: 650; letter-spacing: -.02em; font-size: 1.05rem; line-height: 1.2; }
.brand-by   { font-size: .7rem; color: var(--mud-palette-text-secondary); }

.enopsi-nav { padding: .5rem .5rem 0; }

.nav-section {
  display: block;
  color: var(--mud-palette-text-secondary);
  padding: .875rem .75rem .25rem;
}

.sidebar-foot {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: .75rem;
  color: var(--mud-palette-text-secondary);
}

/* ── Σήμανση επίδειξης ──────────────────────────────────────────────────── */
/* Δείχνει νούμερα που μοιάζουν με τζίρο. Πρέπει να είναι αδύνατο να ξεχαστεί:
   κολλάει στην κορυφή του περιεχομένου και δεν κλείνει. */

.enopsi-demo-banner {
  border-radius: 0;
  font-size: .8125rem;
}

/* ── Επικεφαλίδα οθόνης ─────────────────────────────────────────────────── */

.content { padding-top: 1.5rem; padding-bottom: 3rem; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

/* Ο router εστιάζει τον h1 μετά από κάθε πλοήγηση για τους αναγνώστες οθόνης.
   Χρήσιμο· δεν χρειάζεται όμως να φαίνεται ως πλαίσιο εστίασης. */
.page-head h1:focus { outline: none; }

.page-sub {
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
  margin-top: .125rem;
}

/* ── Επιλογέας περιόδου ─────────────────────────────────────────────────── */

.period-picker {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}

/* Σταθερό πλάτος στο κουμπί: η ετικέτα κυμαίνεται από «Χθες» ως «Προηγούμενη εβδομάδα»,
   και χωρίς αυτό η κεφαλίδα θα αναπηδούσε σε κάθε επιλογή. */
.period-menu-anchor .mud-button-root {
  min-width: 13rem;
  justify-content: space-between;
}

/* Χωράει «06/08/2026 – 09/08/2026» ολόκληρο μαζί με το εικονίδιο. Δύο πλήρεις
   ημερομηνίες με τετραψήφιο έτος είναι είκοσι τρεις χαρακτήρες· σε στενότερο πεδίο το
   MudBlazor τις κόβει σιωπηλά και μένει ορατή μόνο η αρχή της περιόδου. */
.period-range { width: 19.5rem; }

.period-menu {
  padding: .5rem .75rem;
  min-width: 20rem;
  max-width: 24rem;
}

.period-group + .period-group {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--mud-palette-divider);
}

.period-group-title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  margin-bottom: .375rem;
}

.period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

/* Τα τσιπάκια του MudBlazor έρχονται με δικό τους περιθώριο· εδώ το κενό το ορίζει το
   πλέγμα, αλλιώς οι σειρές ξεχειλώνουν. */
.period-chips .mud-chip { margin: 0; }

.period-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin-bottom: .375rem;
}

.period-year-value {
  min-width: 3.5rem;
  text-align: center;
  font-weight: 600;
}

/* ── Κάρτες ─────────────────────────────────────────────────────────────── */

.card, .kpi { padding: 1.125rem 1.25rem; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Σε στενή οθόνη το flex στρίμωχνε το κουμπί της κεφαλίδας και έσπαγε τη λεζάντα του
   («Νέα εταιρεί-α») — ένα κουμπί δεν διαβάζεται σε δύο γραμμές. */
.card-head .mud-button-root { white-space: nowrap; flex-shrink: 0; }

.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.grid-kpi    { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid-halves { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.kpi-label { display: block; color: var(--mud-palette-text-secondary); }

.kpi-value {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: .25rem 0;
  line-height: 1.2;
}

/* Το αστεράκι της ελλιπούς λιανικής — στα KPI και στις γραμμές λιανικής του πίνακα
   τύπων. Πιο ξεθωριασμένο από το ποσό: είναι υποσημείωση, δεν διεκδικεί το βλέμμα πριν
   από τον αριθμό. */
.partial-star {
  font-size: .875em;
  font-weight: 500;
  vertical-align: super;
  margin-left: .125rem;
  color: var(--mud-palette-text-secondary);
  cursor: help;
}

/* Οι επιφυλάξεις των καρτών — τι λείπει από τον αριθμό, με τι συγκρίνεται — μία φορά
   κάτω από όλο το πλέγμα. Κολλάνε στις κάρτες (αρνητικό περιθώριο πάνω από το 1rem του
   .grid) ώστε να διαβάζονται ως δικό τους σχόλιο και όχι ως αρχή της επόμενης ενότητας. */
.grid-note {
  display: block;
  margin: -.5rem 0 1rem;
  line-height: 1.5;
}

/* Η δεύτερη σειρά δεν ξαναπατάει πάνω στο πλέγμα — μόνο η πρώτη κολλάει. */
.grid-note + .grid-note {
  margin-top: .25rem;
}

.kpi-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  flex-wrap: wrap;
}

.delta { display: inline-flex; align-items: center; gap: .125rem; font-weight: 600; }
.delta .mud-icon-root { font-size: 1rem; }
.delta.up   { color: var(--mud-palette-success); }
.delta.down { color: var(--mud-palette-error); }
.delta.flat { color: var(--mud-palette-text-secondary); }

.kpi-compare { color: var(--mud-palette-text-secondary); }

/* ── Πίνακες ────────────────────────────────────────────────────────────── */

.entity-name { font-weight: 550; }
.entity-afm  { font-size: .75rem; color: var(--mud-palette-text-secondary); }

.code-chip { font-weight: 600; }

/* Μπάρα αναλογίας μέσα στο κελί — δείχνει συγκέντρωση χωρίς δεύτερο γράφημα.
   Η μπάρα χρειάζεται δικό της πλάτος για να συγκρίνεται με το μάτι· αν στοιβαχτεί
   πίσω από το ποσοστό σε στενή στήλη, γίνεται διακοσμητική. */
.bar-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.bar-track {
  flex: 1;
  min-width: 2.5rem;
  height: 6px;
  border-radius: 999px;
  background: var(--mud-palette-gray-light);
  overflow: hidden;
}

.bar {
  height: 100%;
  background: var(--mud-palette-primary);
  opacity: .7;
  border-radius: 999px;
}

.bar-cell > span {
  flex: none;
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
  min-width: 2.5rem;
  text-align: right;
}

/* Γραμμές που ανοίγουν κάτι. Το βελάκι ξεχωρίζει το «κάνει κλικ» από το «είναι απλώς
   κάτω από τον δείκτη» — το hover του MudBlazor βάφει και τις δύο περιπτώσεις ίδια. */
.clickable tbody tr { cursor: pointer; }

/* Οι αναδιπλωμένες σειρές δεν είναι κουμπιά και δεν πρέπει να δείχνουν χεράκι. */
.clickable tbody tr.detail-row { cursor: default; }

.row-go {
  flex: none;
  font-size: 1.1rem;
  color: var(--mud-palette-text-disabled);
}

/* ── Καρτέλα παραστατικού ───────────────────────────────────────────────── */

/* Η ανάλυση κάθεται μέσα στον πίνακα, όχι δίπλα του: όποιος άνοιξε τη δέκατη σειρά
   θέλει να τη βλέπει εκεί που την πάτησε. */
.detail-row > td {
  padding: 0 !important;
  background: var(--mud-palette-background-gray);
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

.doc-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}

/* auto-fit αντί για σταθερές στήλες: τα πεδία που λείπουν δεν αφήνουν τρύπες. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem 1.5rem;
}

.detail-item { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }

.detail-key {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mud-palette-text-secondary);
}

.detail-val { overflow-wrap: anywhere; }

.detail-grid.amounts .detail-val { font-weight: 550; }

.detail-section { display: flex; flex-direction: column; gap: .375rem; }

.detail-foot { font-size: .75rem; }

/* Οι στήλες των γραμμών έχουν σταθερά πλάτη που δεν χωρούν σε κινητό — ο πίνακας
   κυλά μέσα στο πλαίσιό του αντί να ανοίγει ολόκληρο το πάνελ πέρα από την οθόνη. */
.doc-lines { overflow-x: auto; }

.doc-lines th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mud-palette-text-secondary);
}

@media (max-width: 480px) {
  /* Στενότερες στήλες ώστε το πλέγμα πεδίων να μένει δίστηλο αντί να ξεχειλίζει·
     οι μεγάλες τιμές (UID, ΑΦΜ) σπάνε γραμμή χάρη στο overflow-wrap. */
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .doc-detail { padding: .75rem .75rem 1rem; }
}

/* Στο αναδιπλωμένο MudTable (κάτω από Sm) η γραμμή λεπτομερειών πρέπει να γίνει block:
   ως table-cell, το ελάχιστο πλάτος του εσωτερικού πίνακα γραμμών (≈28rem) θα άνοιγε
   ολόκληρο το κελί πέρα από την οθόνη πριν προλάβει να δράσει το scroll του .doc-lines. */
@media (max-width: 599px) {
  /* Το ανοιχτό πάνελ δεν επιτρέπεται να φαρδαίνει τον πίνακα που το φιλοξενεί.
     Το width:0 μηδενίζει τη συνεισφορά των εσωτερικών πινάκων στο πλάτος του κελιού
     (τα σταθερά πλάτη των στηλών τους αθροίζουν ~28rem), και το min-width:100%
     τους απλώνει ξανά στο κελί όπως διαμορφώθηκε από τις υπόλοιπες γραμμές —
     ό,τι περισσεύει κυλά οριζόντια μέσα στο δικό τους πλαίσιο. */
  .detail-row .doc-lines { width: 0; min-width: 100%; }
  .detail-row .detail-grid { width: 0; min-width: 100%; }

  /* Ο ΜΑΡΚ είναι δεκαπενταψήφιος και άσπαστος — αν δεν του επιτραπεί να κοπεί,
     κρατά ολόκληρο τον αναδιπλωμένο πίνακα φαρδύτερο από την κάρτα του. */
  .invoices td .entity-afm { overflow-wrap: anywhere; }

  /* Το ίδιο και οι επωνυμίες: ένα «ΠΑΠΑΚΩΝΣΤΑΝΤΙΝΟΥ» δίπλα στην ψευδο-ετικέτα του
     αναδιπλωμένου κελιού θέλει περισσότερο πλάτος απ' όσο έχει η κάρτα, και ο πίνακας
     αποκτά οριζόντιο κύλισμα που τα βοηθήματα δεν φτάνουν. Το anywhere κόβει μόνο
     ό,τι αλλιώς θα ξεχείλιζε — οι κανονικές λέξεις εξακολουθούν να σπάνε στα κενά. */
  .counterparts td .entity-name, .counterparts td .entity-afm,
  .items td .entity-name, .items td .entity-afm,
  .invoices td .entity-name { overflow-wrap: anywhere; }
}

/* Σελιδοποίηση με δύο κουμπιά και το εύρος ανάμεσα. Ο MudTablePager δίνει επιλογή
   «όλα», που εδώ σημαίνει χιλιάδες παραστατικά σε ένα αίτημα. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: .8125rem;
}

.back-link { margin-bottom: .25rem; }

/* ── Χρονοσήμανση & υπόμνημα ────────────────────────────────────────────── */

.as-of {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

/* Μια ολόκληρη πρόταση δεν είναι χρονοσήμανση: σε στενή οθόνη πρέπει να σπάει σε
   δεύτερη γραμμή, αλλιώς σπρώχνει τη σελίδα πλάγια. */
.as-of.wrap { white-space: normal; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mud-palette-success); flex: none; }
.dot.stale { background: var(--mud-palette-warning); }

.legend .swatch { width: 12px; height: 2px; border-radius: 2px; display: inline-block; }
.legend .swatch.revenue  { background: var(--mud-palette-primary); height: 3px; }
.legend .swatch.expenses { background: var(--mud-palette-text-secondary); }
.legend { gap: .375rem; }

/* ── Σύνδεση & εγγραφή ──────────────────────────────────────────────────── */
/* Δεν υπάρχει μπάρα, μενού ούτε επιλογή εταιρείας: πριν τη σύνδεση δεν υπάρχει τίποτα
   από αυτά να δείξουμε, και ένα κέλυφος με άδεια χειριστήρια μοιάζει με χαλασμένο. */

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--mud-palette-background);
}

.auth-theme {
  position: fixed;
  top: .75rem;
  right: .75rem;
  color: var(--mud-palette-text-secondary);
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  border-radius: var(--mud-default-borderradius);
}

.auth-brand { margin-bottom: 1.75rem; }

.auth-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

.auth-title:focus { outline: none; }

.auth-sub {
  margin: .375rem 0 1.5rem;
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
}

.auth-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: .8125rem;
  color: var(--mud-palette-text-secondary);
  text-align: center;
}

/* Ο διαχωριστής ανάμεσα στους δύο τρόπους εισόδου. Χωρίς αυτόν, το δεύτερο κουμπί
   διαβάζεται σαν επόμενο βήμα της ίδιας φόρμας αντί για εναλλακτική. */
.auth-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  font-size: .75rem;
  color: var(--mud-palette-text-secondary);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--mud-palette-divider);
}

/* Ένα μπλοκ ανά πάροχο εξωτερικής σύνδεσης, στην κάρτα «Σύνδεση με λογαριασμό». Η γραμμή
   ανάμεσά τους λέει «άλλος λογαριασμός», όχι «συνέχεια του προηγούμενου». */
.oauth-row + .oauth-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mud-palette-divider);
}

/* Ενδιάμεση κατάσταση: ρωτάμε το API αν υπάρχει συνεδρία. Κρατιέται διακριτική —
   διαρκεί ένα αίτημα, και μια μεγάλη οθόνη φόρτωσης θα την έκανε να μοιάζει με αναμονή. */
.auth-waiting {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 4rem auto;
  border: none;
  font-size: .875rem;
  color: var(--mud-palette-text-secondary);
}

/* ── Μενού λογαριασμού ──────────────────────────────────────────────────── */

.account-head { padding: .625rem 1rem; }
.account-name { font-weight: 600; font-size: .875rem; }
.account-email { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* ── ΦΠΑ ────────────────────────────────────────────────────────────────── */

.vat-side-title { display: flex; align-items: flex-start; gap: .625rem; }
.vat-side-title .mud-icon-root { margin-top: .25rem; }

/* Σε στενή οθόνη το scroll μένει μέσα στην κάρτα — η σελίδα δεν κυλά ποτέ οριζόντια. */
.vat-scroll { overflow-x: auto; }

.vat-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

/* Στο κινητό τα κελιά στενεύουν πριν χρειαστεί κύλιση: τα ποσά χωράνε, το «αχαρακτήριστα»
   κατεβαίνει κάτω από τον κωδικό αντί να τον σπρώχνει. */
@media (max-width: 480px) {
  .vat-table { font-size: .8rem; }
  .vat-table td { padding: .5rem .3rem; }
  .vat-table th { padding: 0 .3rem .5rem; }
  .vat-rate-col { width: 3.2rem; }
  .vat-flag { display: block; margin-left: 0; }
}

.vat-table th {
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mud-palette-text-secondary);
  padding: 0 .5rem .5rem;
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

.vat-table td { padding: .5rem; border-bottom: 1px solid var(--mud-palette-table-lines); }

/* Ο κωδικός δεν διεκδικεί προσοχή: το ποσό είναι το νούμερο που διαβάζεται, ο κωδικός
   είναι εκεί για όποιον τον χρειάζεται όταν ανοίξει τη δήλωση δίπλα. */
.vat-code      { font-weight: 600; }
.vat-code-pair { color: var(--mud-palette-text-secondary); margin-left: .25rem; }

.vat-rate-col { width: 4.5rem; }
.vat-rate     { color: var(--mud-palette-text-secondary); }

/* Τα αχαρακτήριστα δεν κοκκινίζουν — δεν είναι σφάλμα, είναι εκκρεμότητα. */
.vat-table tr.unclassified td { background: rgba(var(--mud-palette-warning-rgb), .07); }

.vat-flag {
  margin-left: .375rem;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--mud-palette-warning-darken);
}

.vat-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--mud-palette-table-lines);
  padding-top: .625rem;
  font-weight: 650;
}

.vat-diff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.vat-diff-label { font-weight: 600; }
.vat-diff-help  { color: var(--mud-palette-text-secondary); max-width: 46rem; }

.vat-diff-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
.vat-diff-value.owed   { color: var(--mud-palette-text-primary); }
.vat-diff-value.credit { color: var(--mud-palette-success); }

/* ── Ιστορικό περιόδων ΦΠΑ ──────────────────────────────────────────────── */

/* Κάθε περίοδος μια πτυσσόμενη γραμμή. Η κλειστή δείχνει ήδη τα τρία νούμερα που
   συγκρίνει κανείς — το άνοιγμα είναι για τη λεπτομέρεια, όχι για την απάντηση. */
.vat-period {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  background: var(--mud-palette-surface);
  margin-bottom: .75rem;
}

.vat-period-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: .875rem 1rem;
  cursor: pointer;
  list-style: none;
}

/* Ο δείκτης του Safari/Chrome έξω από το flex, ώστε να μη μετράει ως πρώτο στοιχείο
   και σπρώχνει τα νούμερα. Μπαίνει πίσω ως ::before, δικό μας. */
.vat-period-head::-webkit-details-marker { display: none; }

.vat-period-name { font-weight: 600; }

.vat-period-name::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  color: var(--mud-palette-text-secondary);
  transition: transform .15s ease;
}

.vat-period[open] > .vat-period-head .vat-period-name::before { transform: rotate(90deg); }

.vat-period-head:hover { background: var(--mud-palette-action-default-hover); }

.vat-period-head:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: -2px;
}

.vat-period-nums {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .875rem;
}

.vat-period-side .muted { margin-right: .35rem; }

.vat-period-diff { font-weight: 650; }
.vat-period-diff.owed   { color: var(--mud-palette-text-primary); }
.vat-period-diff.credit { color: var(--mud-palette-success); }

/* Το σώμα δανείζεται το φόντο της σελίδας, ώστε οι κάρτες μέσα του να ξεχωρίζουν
   από το πλαίσιο της περιόδου αντί να λιώνουν πάνω του. */
.vat-period-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--mud-palette-lines-default);
  padding-top: 1rem;
}

/* Σε στενή οθόνη τα τρία νούμερα πάνε κάτω από το όνομα αντί να στριμωχτούν δίπλα του. */
@media (max-width: 640px) {
  .vat-period-nums { width: 100%; gap: .25rem 1rem; font-size: .8rem; }
}

/* ── Καταστάσεις ────────────────────────────────────────────────────────── */

.empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mud-palette-text-secondary);
  font-size: .875rem;
}

.note { margin-bottom: 1rem; }

.empty-why {
  margin-top: .5rem;
  max-width: 42rem;
  margin-inline: auto;
  font-size: .8125rem;
  line-height: 1.5;
}

/* Η κάλυψη της ανάλυσης ειδών. Μέσα στην κάρτα και πάνω από τον πίνακα, όχι από κάτω:
   είναι η προϋπόθεση για να διαβαστούν σωστά τα νούμερα, όχι σχόλιο πάνω τους. */
.coverage {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--mud-palette-divider);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--mud-palette-text-secondary);
  background: var(--mud-palette-background-gray);
}

.coverage .mud-icon-root { color: var(--mud-palette-text-disabled); }

/* Πωλήσεις / αγορές. Δύο διευθύνσεις, οπότε δύο σύνδεσμοι — το ένα από τα δύο είναι
   πάντα γεμάτο, ώστε να φαίνεται πού βρίσκεται ο χρήστης. */
.side-switch {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

.error-box {
  font-size: .8125rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--mud-palette-error);
  background: rgba(var(--mud-palette-error-rgb), .08);
  border: 1px solid rgba(var(--mud-palette-error-rgb), .25);
  border-radius: var(--mud-default-borderradius);
  padding: .75rem .875rem;
  overflow-wrap: anywhere;
}

/* ── Διαχείριση ─────────────────────────────────────────────────────────── */

/* Οι γραμμές του πίνακα εταιρειών επιλέγονται με κλικ — ο δείκτης πρέπει να το λέει. */
.admin-table tbody tr { cursor: pointer; }

.admin-table tbody tr.selected-row {
  background: rgba(var(--mud-palette-primary-rgb), .08);
}

/* Email, ρόλος, κουμπί. Το email παίρνει τον χώρο που περισσεύει: είναι το μόνο πεδίο
   που δεν έχει προβλέψιμο μήκος. */
.link-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 18rem) auto;
  gap: .75rem;
  align-items: start;
}

/* Τα πεδία των διαπιστευτηρίων είναι τέσσερα και όχι δύο: auto-fit αντί για σταθερές
   στήλες, ώστε να αναδιπλώνονται μόνα τους σε στενή οθόνη χωρίς δεύτερο media query. */
.credential-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  align-items: start;
}

.credential-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}

/* Τα τέσσερα τελευταία ψηφία δίπλα σε κουκκίδες: αριθμητικά στοιχεία σε στήλη που
   διαβάζεται κάθετα. */
.key-mask {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

/* ── Κινητό ─────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .kpi-value { font-size: 1.5rem; }
  .page-head { align-items: flex-start; }

  /* Το κουμπί πιάνει όλο το πλάτος και το μενού μαζεύεται στην οθόνη: 24rem σε κινητό
     βγαίνουν εκτός. */
  .period-picker { width: 100%; }
  .period-menu-anchor, .period-menu-anchor .mud-button-root { width: 100%; }
  .period-menu { min-width: 0; max-width: calc(100vw - 2rem); }

  .appbar-brand { margin-right: .5rem; }
  .enopsi-company { max-width: none; }

  /* Η μπάρα σε κινητό ήταν ήδη στα όριά της· το σήμα της εταιρείας μικραίνει αντί να
     σπρώξει τον διακόπτη θέματος εκτός οθόνης. Μένει ορατό — αυτός είναι ο σκοπός του. */
  .enopsi-company-picker { gap: .375rem; }

  .appbar-company-avatar {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
  }

  .link-form { grid-template-columns: 1fr; }
}

/* ── Όροι χρήσης ────────────────────────────────────────────────────────── */

/* Οι όροι δεν είναι φόρμα: μέσα στο .auth-card των 25rem το κείμενο θα γινόταν στήλη
   λέξεων. Πλάτος ανάγνωσης, με το ίδιο περίγραμμα και την ίδια ακτίνα με τις κάρτες.

   Το align-self δεν είναι λεπτομέρεια: το .auth-shell κεντράρει κατακόρυφα, και ένα
   κείμενο ψηλότερο από την οθόνη σε κεντραρισμένο grid υπερχειλίζει και προς τα πάνω —
   εκεί όμως δεν υπάρχει κύλιση, οπότε η αρχή των όρων θα ήταν αθέατη. */
.legal-card {
  width: 100%;
  max-width: 48rem;
  margin: 1.5rem auto;
  padding: 2rem;
  border-radius: var(--mud-default-borderradius);
  align-self: start;
}

.legal { font-size: .875rem; line-height: 1.7; }

.legal h2 {
  margin: 2rem 0 .5rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.legal p { margin: .5rem 0; }
.legal ul { margin: .5rem 0; padding-left: 1.25rem; }
.legal li { margin: .375rem 0; }

/* Τα στοιχεία του παρόχου σε δύο στήλες: όρος αριστερά, τιμή δεξιά. Διαβάζονται ως
   ταυτότητα και όχι ως παράγραφος — αυτό ακριβώς ψάχνει όποιος τα ζητά. */
.legal-id {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1rem;
  margin: .75rem 0 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--mud-default-borderradius);
}

.legal-id dt { color: var(--mud-palette-text-secondary); }
.legal-id dd { margin: 0; }

.legal-sep { margin: 0 .5rem; color: var(--mud-palette-text-secondary); }

/* Στο κινητό οι δύο στήλες στριμώχνουν την τιμή σε τρεις λέξεις ανά σειρά. */
@media (max-width: 480px) {
  .legal-card { padding: 1.25rem; }
  .legal-id { grid-template-columns: 1fr; padding: .75rem .875rem; }
  .legal-id dt { margin-top: .5rem; font-size: .8125rem; }
}

/* ── Βοήθεια ────────────────────────────────────────────────────────────── */

/* Ο πίνακας περιεχομένων. Τσιπάκια και όχι λίστα: πιάνουν τρεις σειρές αντί για
   δεκαέξι, και ο χρήστης βλέπει ολόκληρο το εύρος της βοήθειας με μια ματιά. */
.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* Ίδια γεωμετρία με τις περιόδους ΦΠΑ — είναι το ίδιο πράγμα: μια πτυσσόμενη
   γραμμή που κρύβει λεπτομέρεια, όχι την απάντηση. */
.help-topic {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  background: var(--mud-palette-surface);
  margin-bottom: .75rem;
}

.help-topic-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  padding: .875rem 1rem;
  cursor: pointer;
  list-style: none;
}

.help-topic-head::-webkit-details-marker { display: none; }

.help-topic-head:hover { background: var(--mud-palette-action-default-hover); }

.help-topic-head:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: -2px;
}

.help-topic-name { font-weight: 600; }

.help-topic-name::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  color: var(--mud-palette-text-secondary);
  transition: transform .15s ease;
}

.help-topic[open] > .help-topic-head .help-topic-name::before { transform: rotate(90deg); }

.help-topic-lead {
  color: var(--mud-palette-text-secondary);
  font-size: .8125rem;
}

/* Το πλάτος είναι λειτουργία, όχι αισθητική: πάνω από ~90 χαρακτήρες τη σειρά το
   μάτι χάνει την επόμενη γραμμή και ο αναγνώστης εγκαταλείπει τη βοήθεια. */
.help-topic-body {
  padding: 1rem;
  border-top: 1px solid var(--mud-palette-lines-default);
  max-width: 46rem;
  font-size: .875rem;
  line-height: 1.65;
}

.help-topic-body p  { margin: 0 0 .75rem; }
.help-topic-body ul,
.help-topic-body ol { margin: 0 0 .75rem; padding-inline-start: 1.5rem; }
.help-topic-body li { margin-bottom: .375rem; }

.help-topic-body h3 {
  margin: 1.25rem 0 .5rem;
  font-size: .9375rem;
  font-weight: 650;
}

.help-topic-body > :last-child { margin-bottom: 0; }

/* Τα βήματα προς την ΑΑΔΕ αναπνέουν περισσότερο: διαβάζονται με το ένα χέρι στο
   ποντίκι και το βλέμμα να πηγαινοέρχεται από την οθόνη στην άλλη καρτέλα. */
.help-steps li { margin-bottom: .625rem; }

.help-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125em;
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--mud-palette-action-default-hover);
  word-break: break-all;
}

.help-note,
.help-warn {
  border-inline-start: 3px solid var(--mud-palette-lines-default);
  padding: .5rem .875rem;
  border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
  background: var(--mud-palette-background-gray);
}

.help-note { color: var(--mud-palette-text-secondary); }

/* Οι δύο προειδοποιήσεις της σελίδας — «μη δώσετε κωδικούς TAXISnet» και «δεν είναι
   περιοδική δήλωση» — είναι ακριβώς αυτές που κοστίζουν αν προσπεραστούν. */
.help-warn { border-inline-start-color: var(--mud-palette-warning); }

@media (max-width: 640px) {
  .help-topic-lead { width: 100%; }
}

/* ── Οθόνη φόρτωσης & σφάλματα του Blazor ───────────────────────────────── */
/* Ζωντανεύει πριν φορτώσει το .NET, άρα πριν υπάρξει μεταβλητή --mud-palette-*.
   Εδώ και μόνο εδώ τα χρώματα γράφονται κατευθείαν. */

.loading-splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: #0e1116;
  color: #8b949e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .875rem;
}

@media (prefers-color-scheme: light) {
  .loading-splash { background: #f6f8fa; color: #636c76; }
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: #cf222e;
  color: #fff;
  font-size: .875rem;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }
#blazor-error-ui a { color: #fff; text-decoration: underline; }