/* FSZ Apps — shared styles. Corporate-minimal, Navy #3A3A60 / Orange #CE6E47.
   Themes: light (default), dark, and "system" (no data-theme attribute → follows the OS). */

:root {
  --navy: #3A3A60;
  --navy-dark: #2D2D4D;
  --navy-soft: #5C5C82;
  --orange: #CE6E47;
  --orange-hover: #B95F3B;
  --orange-soft: #FFF3EC;
  --orange-border: #F0CDB8;
  --topbar: #3A3A60;
  --topbar-text: #ffffff;
  --topbar-link: #F2C9B7;
  --bg: #FAFAF9;
  --surface: #ffffff;
  --surface-2: #F5F5F3;
  --hover: #F2F2F0;
  --line: #D6D5CE;
  --line-soft: #EEEEEB;
  --filter-border: var(--line);
  --muted: #9C9CB0;
  --text: #2B2B3A;
  --heading: #3A3A60;
  --error-bg: #FDECEA; --error-line: #F3B7B0; --error-text: #8B2B20;
  --ok-bg: #EAF5EE;   --ok-line: #B4D8C2;   --ok-text: #1F5E37;
  --shadow: 0 8px 24px rgba(43, 43, 58, .14);
  color-scheme: light;

  /* Ύψη σταθερών (sticky) μπαρών του /apps/ dashboard· ενημερώνονται από JS. */
  --topbar-h: 56px;
  --entities-h: 0px;
  --records-h: auto;
}

/* Σκούρο: όταν ο χρήστης το επιλέγει ρητά */
:root[data-theme="dark"] {
  --navy: #C7C7DE;
  --navy-soft: #4A4A66;
  --orange: #E28660;
  --orange-hover: #C97350;
  --orange-soft: #33251E;
  --orange-border: #5A3C2C;
  --topbar: #21212F;
  --topbar-text: #F1F1F6;
  --topbar-link: #E9B79E;
  --bg: #15151D;
  --surface: #1E1E29;
  --surface-2: #262633;
  --hover: #2C2C3A;
  --line: #383848;
  --line-soft: #2E2E3C;
  --filter-border: #4A4A5E;
  --muted: #9A9AAE;
  --text: #E7E7EE;
  --heading: #C7C7DE;
  --error-bg: #3A1E1B; --error-line: #6E3A33; --error-text: #F0B3AA;
  --ok-bg: #1C3326;   --ok-line: #33604A;   --ok-text: #A8DCC0;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Προεπιλογή συστήματος: καμία ρητή επιλογή → ακολουθεί το λειτουργικό */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #C7C7DE;
    --navy-soft: #4A4A66;
    --orange: #E28660;
    --orange-hover: #C97350;
    --orange-soft: #33251E;
    --orange-border: #5A3C2C;
    --topbar: #21212F;
    --topbar-text: #F1F1F6;
    --topbar-link: #E9B79E;
    --bg: #15151D;
    --surface: #1E1E29;
    --surface-2: #262633;
    --hover: #2C2C3A;
    --line: #383848;
    --line-soft: #2E2E3C;
    --filter-border: #4A4A5E;
    --muted: #9A9AAE;
    --text: #E7E7EE;
    --heading: #C7C7DE;
    --error-bg: #3A1E1B; --error-line: #6E3A33; --error-text: #F0B3AA;
    --ok-bg: #1C3326;   --ok-line: #33604A;   --ok-text: #A8DCC0;
    --shadow: 0 8px 24px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Κέλυφος σελίδας με οριοθετημένο ύψος (μόνο app.html) ----------
   Η σελίδα ΔΕΝ κυλά ποτέ σαν σύνολο — μόνο το .records-scroll στο εσωτερικό
   της κυλά. Έτσι οι δύο πάνω μπάρες μένουν σταθερές στη θέση τους (απλή ροή,
   όχι sticky-over-a-scrolling-page), χωρίς κανένα κενό να μπορεί ποτέ να
   «ξεπροβάλει» ανάμεσά τους — ό,τι κι αν συμβαίνει στιγμιαία με τα μετρημένα
   ύψη. Δεν αγγίζει την εμφάνιση/διάταξη της .topbar. */
body.app-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.app-shell main.wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--heading); text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 clamp(16px, 4vw, 40px); height: 56px; background: var(--topbar);
  position: sticky; top: 0; z-index: 40;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }
/* Το λογότυπο/τίτλος είναι πλέον σύνδεσμος προς το κυρίως site — μηδενίζουμε
   τα προεπιλεγμένα στυλ συνδέσμου ώστε να μη φαίνεται σαν link. */
a.topbar .brand, a.brand { text-decoration: none; color: inherit; }
a.brand:hover { text-decoration: none; color: inherit; }
a.brand:hover .title { text-decoration: underline; }
/* Το λογότυπο του site. Το markup κρατά ένα γράμμα ως fallback — το κρύβουμε. */
.topbar .mark {
  width: 28px; height: 28px; flex-shrink: 0;
  background: url("/assets/logo.png") center / contain no-repeat;
  font-size: 0; color: transparent;
}
.topbar .title { font-size: 14px; font-weight: 700; color: var(--topbar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.badge {
  font-size: 11px; font-weight: 700; color: #2D2D4D; background: var(--orange);
  padding: 5px 10px; letter-spacing: .3px; text-transform: uppercase;
  display: inline-block; text-decoration: none; cursor: pointer; border: none;
}
.badge:hover { background: var(--orange-hover); color: #fff; text-decoration: none; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy-soft);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.who { font-size: 14px; color: var(--topbar-text); }
.linkbtn { background: none; border: none; color: var(--topbar-link); font-size: 13px; cursor: pointer; padding: 0; height: auto; }
.linkbtn:hover { color: var(--topbar-text); text-decoration: underline; background: none; }

/* Κουμπί avatar+email στην πάνω μπάρα → πάει απευθείας στις Ρυθμίσεις (χωρίς dropdown). */
.userlink {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; text-decoration: none; cursor: pointer;
}
.userlink:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.userlink .who { text-decoration: none; }
.userlink:hover .who { text-decoration: underline; }

/* Κουμπί απόκρυψης/εμφάνισης της πάνω μπάρας */
.topbar-toggle {
  background: none; border: none; color: var(--topbar-link); height: 32px; width: 32px;
  padding: 0; font-size: 13px; cursor: pointer; border-radius: 4px; flex-shrink: 0;
}
.topbar-toggle:hover { background: rgba(255, 255, 255, .12); color: var(--topbar-text); }

/* Λεπτή σταθερή λωρίδα που εμφανίζεται μόνο όταν η πάνω μπάρα είναι κρυμμένη. */
.topbar-restore {
  display: none; position: sticky; top: 0; z-index: 40; width: 100%;
  align-items: center; justify-content: center; gap: 6px;
  height: 14px; padding: 0; background: var(--topbar); color: var(--topbar-link);
  border: none; font-size: 11px; cursor: pointer;
}
.topbar-restore:hover { color: var(--topbar-text); }
body.topbar-collapsed .topbar { display: none; }
body.topbar-collapsed .topbar-restore { display: flex; }

/* Κινητό/στενές οθόνες: το email και το «Αποσύνδεση» φεύγουν από την πάνω μπάρα
   (μένουν προσβάσιμα από τις Ρυθμίσεις) ώστε λογότυπο+τίτλος να μη συμπιέζονται
   στο μηδέν. Ισχύει και στη σελίδα Ρυθμίσεων, που μοιράζεται το ίδιο markup. */
@media (max-width: 640px) {
  .who { display: none; }
  .linkbtn { display: none; }
  .topbar .right { gap: 8px; }
  .badge { padding: 5px 8px; }
}

/* ---------- Μενού χρήστη (πάνω δεξιά) — χρησιμοποιείται στις Ρυθμίσεις ---------- */
.usermenu { position: relative; }
.userbtn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; height: 44px; padding: 0 6px;
  color: var(--topbar-text); font-size: 14px; font-weight: 400; cursor: pointer;
}
.userbtn:hover { background: rgba(255, 255, 255, .08); }
.userbtn .caret { font-size: 11px; opacity: .8; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 200px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 6px 0;
}
.menu a, .menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 16px; font-size: 14px; font-weight: 400; color: var(--text);
  height: auto; cursor: pointer; font-family: inherit; text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.menu .sepline { height: 1px; background: var(--line-soft); margin: 6px 0; }

/* ---------- Εναλλαγή εφαρμογών (κάτω από το λογότυπο/τίτλο, πάνω αριστερά) ----------
   Ίδιο μενού με το .usermenu/.menu παραπάνω — μόνο η θέση αλλάζει (ανοίγει προς
   τα δεξιά, όχι προς τα αριστερά, αφού το κουμπί είναι στην αριστερή άκρη). */
.appswitcher { position: relative; min-width: 0; }
.app-switcher-btn {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: none; border: none; height: 56px; margin: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.app-switcher-btn:hover .title { text-decoration: underline; }
.app-switcher-btn .caret { font-size: 11px; opacity: .7; color: var(--topbar-link); flex-shrink: 0; }
.appswitcher .menu { left: 0; right: auto; }
.appswitcher .menu .current {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: default;
}
.appswitcher .menu .current-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
}

/* ---------- Σταθερή μπάρα «Οι φορείς μου» (κάτω από την πάνω μπάρα) ---------- */
.entities-bar-outer {
  position: sticky; top: var(--topbar-h); z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.entities-bar-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 40px);
  display: flex; flex-direction: column; gap: 8px;
}
/* Το κουμπί «Οι φορείς μου» δεν είχε δικό του στυλ και κληρονομούσε το γενικό
   button (πορτοκαλί φόντο, height:44px) — επιπλέον, ως παιδί flex-column
   γονέα τεντωνόταν σε πλήρες πλάτος (align-items:stretch) με κεντραρισμένο
   κείμενο εξ ορισμού. Το μηδενίζουμε σε απλή, αριστερά στοιχισμένη γραμμή. */
.entities-toggle {
  display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  width: 100%; background: none; border: none; padding: 4px 2px;
  height: auto; text-align: left; cursor: pointer; font-family: inherit;
}
.entities-toggle:hover { background: var(--hover); }
.entities-toggle .chev { font-size: 11px; color: var(--muted); }
/* Όνομα επιλεγμένου φορέα, ορατό ΜΟΝΟ όταν η μπάρα είναι κλειστή (aria-expanded
   ενημερώνεται από applyEntitiesCollapsed() στο app.html) — με πολλούς
   δηλωμένους φορείς δείχνει ποιον κοιτάς χωρίς να χρειάζεται άνοιγμα της
   μπάρας, που κρύβει τον πίνακα εγγραφών. */
.entities-toggle .current-entity {
  display: none;
  margin-left: auto;
  font-size: 13px; font-weight: 600; color: var(--heading);
  max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entities-toggle[aria-expanded="false"] .current-entity { display: inline-block; }

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px); }
.narrow { max-width: 720px; }
.stack { display: flex; flex-direction: column; gap: 24px; }

/* Το «← Πίσω στην εφαρμογή» μένει ορατό όσο κυλά το υπόλοιπο περιεχόμενο
   (Ρυθμίσεις, Πληρωμές) — αυτές οι σελίδες κυλούν κανονικά σαν σελίδα, το
   .topbar είναι ήδη sticky (top:0), οπότε αυτό κολλάει ακριβώς από κάτω του. */
.back-sticky {
  position: sticky; top: var(--topbar-h); z-index: 20;
  background: var(--bg); padding: 10px 0; margin-bottom: -4px;
}
.label { font-size: 13px; font-weight: 600; color: var(--heading); text-transform: uppercase; letter-spacing: .4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- Cards / notices ---------- */
.card { background: var(--surface); border: 1px solid var(--line); padding: 20px 24px; }
.card h2 { margin: 0 0 4px; font-size: 16px; color: var(--heading); }
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--orange-soft); border: 1px solid var(--orange-border); padding: 10px 18px; font-size: 14px;
}
.error { background: var(--error-bg); border: 1px solid var(--error-line); color: var(--error-text); padding: 12px 16px; font-size: 14px; }
.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-text); padding: 12px 16px; font-size: 14px; }
.hidden { display: none !important; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=search] {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line);
  font-size: 15px; color: var(--text); background: var(--surface); font-family: inherit;
}
input::placeholder { color: var(--muted); }
input:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--heading); }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 4px; }
.consent input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--orange); }
.consent label { font-size: 13px; line-height: 1.5; color: var(--text); font-weight: 400; }

button {
  height: 44px; padding: 0 20px; border: none; background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
button:hover { background: var(--orange-hover); }
button:disabled { opacity: .55; cursor: default; }
button.ghost { background: var(--surface); color: var(--heading); border: 1px solid var(--line); }
button.ghost:hover { background: var(--hover); }
button.small { height: 34px; padding: 0 14px; font-size: 13px; }
button.danger { background: var(--surface); color: var(--orange); border: 1px solid var(--orange); }
button.danger:hover { background: var(--orange-soft); }

/* Οι καρτέλες κυλούν οριζόντια σε στενές οθόνες αντί να σπάνε σε σειρές. */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  height: 34px; padding: 0 16px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.tab:hover { background: none; color: var(--heading); }
.tab[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--orange); }

/* Βελάκια ‹ › πάνω από τις καρτέλες (enableTabsScrollArrows, app.js) —
   εναλλακτική πλοήγηση με κλικ όταν υπάρχουν πολλές κατηγορίες και δεν
   βολεύει το swipe/scroll με ποντίκι σε desktop. Κρυφά by default, μόνο σε
   .overflowing (όντως κυλάει κάτι) και μόνο πάνω από ~640px — σε κινητό
   παραμένει το ίδιο touch-scroll. */
.tabs-scroll-wrap { position: relative; }
.tabs-arrow {
  display: none;
  position: absolute; top: 0; bottom: 0;
  width: 26px; align-items: center; padding: 0;
  border: none; background: none; color: var(--heading);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
.tabs-arrow.left { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--surface) 55%, transparent); }
.tabs-arrow.right { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--surface) 55%, transparent); }
.tabs-arrow:disabled { opacity: .25; cursor: default; }
@media (min-width: 641px) {
  .tabs-scroll-wrap.overflowing .tabs-arrow { display: flex; }
}

/* Επιλογέας στηλών (☰ Στήλες, αριστερά από τις καρτέλες) */
.colpicker-toggle {
  height: 34px; flex-shrink: 0; padding: 0 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--heading); font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.colpicker-toggle:hover { background: var(--hover); }
/* position:fixed (όχι absolute) με top/left υπολογισμένα από JS (positionColpickerPanel
   στο app.html) — βλ. σχόλιο εκεί. Ο λόγος: το .records-head (πρόγονος του panel) έχει
   overflow:auto (για την Αναφορές/CPV, βλ. αλλού σε αυτό το αρχείο), και ένα absolute
   panel μέσα του κόβεται οπτικά στο διαθέσιμο ύψος του .records-head τη στιγμή εκείνη —
   σε καρτέλες όπως τα Αιτήματα αυτό είναι πολύ μικρό (~95px), οπότε το panel «άνοιγε»
   αλλά η λίστα στηλών ήταν ουσιαστικά αόρατη (αναφέρθηκε 12/09/2026, screenshot). Με
   fixed το panel γλιτώνει το clipping — τοποθετείται σε συντεταγμένες οθόνης, όχι μέσα
   στο ρεύμα του γονέα του. */
.colpicker-panel {
  position: fixed; z-index: 45; width: min(420px, 90vw);
  max-height: 360px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.colpicker-actions {
  display: flex; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.colpicker-actions button {
  background: none; border: none; padding: 0; height: auto; color: var(--orange);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.colpicker-actions button:hover { text-decoration: underline; background: none; }
.colpicker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.colpicker-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  padding: 4px 2px; cursor: pointer;
}
.colpicker-item input[type="checkbox"] { width: auto; height: auto; margin: 0; }
.colpicker-item input[disabled] { opacity: .5; }

/* Καρτέλα «Αναφορές»: επιλογή κατηγορίας + διάστημα + λήψη CSV */
.reports-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.reports-controls select,
.reports-controls input[type="date"] {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.reports-controls input[type="date"] { max-width: 152px; }

/* Κάτω μπάρα (footer): όνομα εταιρείας + αναφορά προέλευσης δεδομένων.
   Στο app.html είναι flex-παιδί δίπλα στο header/main μέσα στο κλειδωμένο
   κέλυφος (body.app-shell) — το main.wrap έχει flex:1 1 auto, οπότε
   συρρικνώνεται αυτόματα για να χωρέσει, χωρίς να αγγίζει τον υπολογισμό
   ύψους του πίνακα εγγραφών. */
.app-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px clamp(16px, 4vw, 40px);
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.app-footer .sep-dot { opacity: .6; }
.app-footer a { color: var(--muted); text-decoration: underline; }
.app-footer a:hover { color: var(--heading); }

/* Μικρό πλήκτρο PDF στην αρχή κάθε εγγραφής — απευθείας σύνδεσμος στο
   open data του ΚΗΜΔΗΣ, χωρίς proxy (απλή πλοήγηση, όχι fetch). */
.pdf-col { width: 34px; text-align: center; }
.pdf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--orange);
}
.pdf-btn:hover { background: var(--orange-soft); border-color: var(--orange-border); text-decoration: none; }
.pdf-btn svg { width: 14px; height: 14px; }

/* Πεδία ποσού στα φίλτρα (Καθαρή αξία/Με ΦΠΑ κλπ): οι χρήστες πληκτρολογούν
   το ποσό, δεν χρειάζονται τα βελάκια αύξησης/μείωσης του type="number". Η
   αφαίρεσή τους δεν αλλάζει το πλάτος/ύψος του πεδίου — μόνο κρύβει το
   spinner, άρα δεν επηρεάζει τη διάταξη. */
.filter-input[type="number"]::-webkit-outer-spin-button,
.filter-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Επιλογή θέματος */
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500;
}
.choice:hover { background: var(--hover); }
.choice[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); color: var(--heading); font-weight: 600; }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth .panel { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); padding: 32px; }
.auth h1 { font-size: 20px; margin: 0 0 4px; color: var(--heading); }
.auth p.sub { margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.auth form { display: flex; flex-direction: column; gap: 16px; }
.auth .mark-lg {
  width: 56px; height: 56px; margin-bottom: 20px;
  background: url("/assets/logo.png") center / contain no-repeat;
  font-size: 0; color: transparent;
}
.sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 20px 0; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google, .linkedin {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.google:hover, .linkedin:hover { background: var(--hover); }

/* ---------- Entity picker ---------- */
.results { border: 1px solid var(--line); border-top: none; background: var(--surface); max-height: 320px; overflow-y: auto; }
.result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.result:last-child { border-bottom: none; }
.result:hover { background: var(--hover); }
.result .meta { font-size: 12px; color: var(--muted); }

.entity-list { display: flex; flex-direction: column; gap: 8px; }
.entity {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); padding: 9px 16px; cursor: pointer; text-align: left;
  width: 100%; height: auto; color: var(--text); font-weight: 400;
}
.entity:hover { background: var(--hover); border-color: var(--muted); }
.entity[aria-current="true"] { border-color: var(--orange); background: var(--orange-soft); }
.entity .name { font-weight: 600; color: var(--heading); }

/* Αστεράκι «προεπιλεγμένος φορέας» (11/09/2026) — μέσα στη γραμμή .entity, που
   έγινε από <button> σε <div role="button"> ώστε να χωράει αυτό το δεύτερο,
   ανεξάρτητο κλικ (ένα <button> μέσα σε άλλο <button> δεν επιτρέπεται στο
   HTML). Το stopPropagation() στο app.html εμποδίζει το κλικ στο αστεράκι να
   επιλέξει επίσης τον φορέα. */
.entity .star-default {
  flex-shrink: 0; background: none; border: none; padding: 2px 4px; margin: 0;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--muted);
}
.entity .star-default:hover { color: var(--orange); }
.entity .star-default.is-default { color: var(--orange); }

/* Γραμμή φορέα στις Ρυθμίσεις (χωρίς κλικ σε όλη τη γραμμή) */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); padding: 12px 16px;
}
.row .name { font-weight: 600; color: var(--heading); }

/* ---------- Παραγωγικό περιβάλλον (καρτέλες + εγγραφές) ---------- */
/* Ολόκληρη η ενότητα έχει οριοθετημένο ύψος: ο τίτλος/καρτέλες μένουν σταθεροί
   πάνω, το πεδίο κύλισης (κάθετο + οριζόντιο) είναι στη μέση και είναι το μόνο
   που κυλά, ώστε οι δύο μπάρες κύλισής του να μένουν πάντα ορατές. Το --records-h
   υπολογίζεται ακριβώς από JS (πραγματικό διαθέσιμο ύψος)· το calc() είναι μόνο
   το αρχικό fallback πριν προλάβει να τρέξει το script. */
.records-section {
  height: var(--records-h, calc(100vh - var(--topbar-h) - var(--entities-h) - 160px));
  min-height: 280px;
}
/* Μέσα στο κλειδωμένο κέλυφος (app.html) το ύψος το δίνει το ίδιο το flexbox —
   γεμίζει ό,τι απομένει μετά την κεφαλίδα/καρτέλες, χωρίς να χρειάζεται πλέον
   ακριβής υπολογισμός σε px από JS. Νικά την παραπάνω γραμμή λόγω μεγαλύτερης
   ειδικότητας (specificity), όχι σειράς. */
body.app-shell .records-section {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* flex-shrink:0 άφηνε το records-head να ξεχειλίζει σιωπηλά έξω από το
   κλειδωμένο κέλυφος (body.app-shell/main.wrap: overflow:hidden) όταν το
   περιεχόμενό του γίνεται ψηλότερο από τον διαθέσιμο χώρο — κυρίως στην
   καρτέλα «Αναφορές», όπου μια μεγάλη αλυσίδα ΑΔΑΜ (.chain-result-box, ως
   620px) σπρώχνει την αναζήτηση CPV από κάτω εκτός οθόνης, χωρίς καμία
   μπάρα κύλισης να το δείχνει (αναφέρθηκε 12/09/2026 — ορατό μόνο με έντονο
   zoom-out του browser). Τώρα το records-head μπορεί να συμπιεστεί
   (flex-shrink:1 μέσω flex:0 1 auto, min-height:0) και αποκτά δική του
   κάθετη κύλιση όταν δεν χωρά· στην κανονική προβολή (πίνακας εγγραφών) το
   φυσικό του ύψος είναι μικρό, οπότε δεν συμπιέζεται και η συμπεριφορά
   μένει ίδια με πριν. Σκόπιμα ΧΩΡΙΣ -webkit-overflow-scrolling:touch εδώ —
   ίδια ιδιότητα προκάλεσε ήδη τεκμηριωμένο πρόβλημα ένθετης κύλισης σε iOS
   Safari στο .records-scroll πιο κάτω· στο κινητό η απόκρυψη γίνεται πλέον
   μέσω page-level scroll (βλ. media query breakpoint 640px). */
.records-head {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.records-head::-webkit-scrollbar { width: 11px; }
.records-head::-webkit-scrollbar-track { background: var(--surface-2); }
.records-head::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--surface-2); }
.records-head::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* flex-basis:auto (η προηγούμενη τιμή, μέσω "flex:1 1 auto") έκανε το
   .records-scroll να μπαίνει στον υπολογισμό flex-shrink με ΤΕΡΑΣΤΙΟ
   "υποθετικό" ύψος βάσης — όσο το πλήρες, μη-σελιδοποιημένο ύψος του
   πίνακα (π.χ. 2200px+ για 25 γραμμές), παρότι το ίδιο έχει δικό του
   overflow:auto και ποτέ δεν χρειάζεται τόσο χώρο. Το flex-shrink
   μοιράζει τον αρνητικό χώρο ΑΝΑΛΟΓΙΚΑ με (flex-basis × flex-shrink) του
   κάθε αδερφού· με τόσο μεγάλη βάση στο .records-scroll, το ποσοστό
   συμπίεσης που προέκυπτε εφαρμοζόταν το ΙΔΙΟ και στο .records-head
   (ίδιο flex-shrink:1) — δηλαδή ένα ελαφρύ deficit ύψους στην ενότητα
   (π.χ. από zoom in του browser ή απλά μικρότερο ύψος οθόνης) συμπίεζε
   το records-head κατά ~70-75%, πολύ κάτω από το πραγματικό του
   περιεχόμενο (καρτέλες + αναζήτηση), και η αναζήτηση "χανόταν" μέσα
   στο δικό του, ελάχιστα ορατό, εσωτερικό scroll — αναφέρθηκε 11/09/2026
   ("εξαφανίζεται η αναζήτηση σε zoom in, κρύβεται πίσω από τις γραμμές").
   Επιβεβαιώθηκε ζωντανά στο production (χωρίς καν zoom, μόνο σε
   μετρίου ύψους παράθυρο): .records-head clientHeight έπεφτε στα 28px
   ενώ το πραγματικό του περιεχόμενο χρειαζόταν 95px.
   Λύση: flex-basis:0 αντί για auto. Έτσι το .records-scroll μπαίνει στον
   υπολογισμό ΧΩΡΙΣ να «μετράει» το τεράστιο εσωτερικό του περιεχόμενο —
   παίρνει ό,τι χώρο περισσεύει μέσω flex-grow:1 (κανονική συμπεριφορά,
   καμία αλλαγή στην πράξη αφού έτσι κι αλλιώς πάντα κυλούσε εσωτερικά),
   ενώ το .records-head διατηρεί το φυσικό του ύψος και συμπιέζεται
   (μέσω δικού του flex-shrink:1 στο app.css) μόνο όταν ΤΟ ΙΔΙΟ το
   περιεχόμενό του (π.χ. μακριά αλυσίδα ΑΔΑΜ στις Αναφορές) δεν χωράει —
   ο αρχικός στόχος του fix 12/09/2026 παραμένει ανέπαφος, αφού στην
   καρτέλα «Αναφορές» το .records-scroll έχει ούτως ή άλλως class
   "hidden" (display:none) και δεν μπαίνει καν στον υπολογισμό flex. */
.records-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  background: var(--bg);
  scrollbar-width: auto;
}
/* Πιο εμφανής μπάρα κύλισης (Chrome/Edge/Safari) — μένει πάντα στο κάτω/δεξί
   άκρο του οριοθετημένου πλαισίου, χωρίς να χρειάζεται να κατέβει κανείς ως
   το τέλος της λίστας για να τη δει. */
.records-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.records-scroll::-webkit-scrollbar-track { background: var(--surface-2); }
.records-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--surface-2); }
.records-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Ένδειξη (σκίαση) στη δεξιά άκρη όταν ο πίνακας κυλάει και οριζόντια — κυρίως
   χρήσιμο σε στενές/κινητές οθόνες όπου δεν είναι προφανές ότι υπάρχουν κι άλλες στήλες. */
.records-scroll.has-hscroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}
.pager { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Κινητό: κανονική κύλιση σελίδας αντί για εσωτερικό .records-scroll ----------
   Το «κλειδωμένο κέλυφος» (overflow:hidden στο body.app-shell + εσωτερική κύλιση
   μόνο μέσα στο .records-scroll) παρέμεινε μπλοκαρισμένο σε πραγματικές κινητές
   συσκευές (αναφέρθηκε 09/09/2026, παρότι το -webkit-overflow-scrolling:touch
   ήταν ήδη εφαρμοσμένο) — πιθανότατα λόγω γνωστών ιδιορρυθμιών του iOS Safari με
   ένθετη κύλιση μέσα σε πρόγονο με overflow:hidden. Λύση: κάτω από το breakpoint
   αφήνουμε τη ΣΕΛΙΔΑ να κυλά κανονικά (φυσική, καλά δοκιμασμένη συμπεριφορά σε
   κινητό) — οι δύο πάνω μπάρες (.topbar, .entities-bar-outer) μένουν στη θέση
   τους επειδή είναι ήδη position:sticky, και ο πίνακας εγγραφών απλώς ρέει κάτω
   από αυτές αντί να κυλά μέσα σε δικό του κουτί.
   ΣΗΜΕΙΩΣΗ (πρώτη απόπειρα 09/09/2026): αλλάζοντας μόνο height/overflow ΔΕΝ
   αρκούσε — η αλυσίδα flex:1 1 auto + min-height:0 σε main.wrap/.records-section/
   .records-scroll παρέμενε ενεργή, και μέσα σε γονέα με πλέον απροσδιόριστο
   (auto) ύψος αυτό συμπίεζε ολόκληρη την περιοχή εγγραφών σχεδόν στο μηδέν
   (γνωστή παγίδα flexbox) — αποτέλεσμα χειρότερο από πριν (καθόλου κύλιση
   πουθενά). Η σωστή λύση διακόπτει την αλυσίδα flex-item σε κάθε επίπεδο με
   display:block, ώστε το ύψος να καθορίζεται καθαρά από το περιεχόμενο. */
@media (max-width: 640px) {
  body.app-shell {
    height: auto;
    overflow: visible;
    display: block;
  }
  body.app-shell main.wrap {
    display: block;
    overflow: visible;
  }
  body.app-shell .records-section {
    display: block;
    height: auto;
  }
  .records-head {
    /* ΟΧΙ display:block εδώ — το records-head είναι δικός του flex-context
       (flex-direction:column, gap:8px) για τα εσωτερικά του στοιχεία
       (καρτέλες, φίλτρα, αναζήτηση αλυσίδας/CPV), άσχετο με το αν ο ΓΟΝΙΟΣ
       του (records-section) είναι flex ή block. Μηδενίζουμε μόνο την κάθετη
       κύλιση, ώστε στο κινητό να αναλαμβάνει η φυσική κύλιση της σελίδας. */
    overflow-y: visible;
  }
  .records-scroll {
    display: block;
    overflow-x: auto;
    overflow-y: visible;
    /* Το -webkit-overflow-scrolling:touch (βασικός κανόνας παραπάνω) κάνει το
       iOS Safari να μεταχειρίζεται το στοιχείο ως δική του ανεξάρτητη περιοχή
       κύλισης (UIScrollView) — γνωστό ζήτημα: «αρπάζει» το swipe ακόμα κι όταν
       δεν έχει τίποτα να κυλήσει εσωτερικά (π.χ. καρτέλα «Αναφορές» όπου είναι
       hidden δούλευε κανονικά, οι υπόλοιπες καρτέλες όχι — ίδιο layout, μόνη
       διαφορά αυτή η ιδιότητα). Το ακυρώνουμε εδώ ώστε να περνάει το swipe στη
       φυσική κύλιση της σελίδας. */
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }
}

/* ---------- Table ---------- */
.tablewrap { border: 1px solid var(--line); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 860px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--heading); white-space: nowrap; position: sticky; top: 0; }
td.num { text-align: right; white-space: nowrap; }

/* Πλάτος στηλών με σύρσιμο (drag-resize). Ανενεργό μέχρι ο χρήστης να
   σύρει μια λαβή έστω μία φορά — μέχρι τότε ο πίνακας μένει σε
   table-layout:auto όπως πάντα, μηδενικό ρίσκο για το υπάρχον layout.
   Το width:auto (αντί για 100%) σημαίνει ότι ο πίνακας απλώς μεγαλώνει σε
   πλάτος όσο χρειάζεται — η ήδη υπάρχουσα οριζόντια κύλιση του .records-scroll
   αναλαμβάνει το υπόλοιπο, όπως ήδη συμβαίνει σε στενές οθόνες. */
table.fixed-cols { table-layout: fixed; width: auto; }
table.fixed-cols th .th-sort { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.col-resize-handle {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%;
  cursor: col-resize; touch-action: none; z-index: 3;
}
.col-resize-handle:hover, .col-resize-handle.resizing { background: var(--orange, #CE6E47); opacity: .45; }

/* Επικεφαλίδα με ταξινόμηση: φαίνεται σαν απλό κείμενο, όχι σαν κουμπί —
   δείχνει βέλος ▲/▼ όταν η στήλη είναι η τρέχουσα ταξινόμηση. */
th .th-sort {
  background: none; border: none; padding: 0; margin: 0; height: auto;
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
}
th .th-sort:hover { color: var(--orange); }

/* Δεύτερη σειρά επικεφαλίδων: ένα πεδίο φίλτρου ανά στήλη. Το πραγματικό
   ύψος της πρώτης σειράς (και άρα το «top» της δεύτερης) μετριέται από JS
   στο renderTable() — δεν υποθέτουμε σταθερό ύψος σε px. */
.filter-row th {
  padding: 4px 8px 8px; background: var(--surface); position: sticky; z-index: 1;
}
.filter-row .filter-input {
  width: 100%; height: 28px; padding: 0 8px; font-size: 12.5px;
  border: 1px solid var(--filter-border); background: var(--surface); color: var(--text);
  font-family: inherit;
}
.filter-row select.filter-input { padding: 0 4px; }
/* Κάθετη στοίβα (όχι δίπλα-δίπλα) — δύο native date/number inputs στη σειρά
   χρειάζονται ~270-390px πλάτος, κάτι που έκανε στήλες όπως η «Ημ/νία
   υπογραφής» δυσανάλογα φαρδιές και έσπρωχνε άλλες στήλες εκτός οθόνης
   (αναφέρθηκε 07/09/2026, μετά την προσθήκη του drag-resize). Κάθετα, ένα
   πεδίο πλάτους ~110-140px αρκεί για ολόκληρη τη στήλη. */
.filter-range { display: flex; flex-direction: column; gap: 3px; }
.filter-range .filter-input { min-width: 0; width: 100%; }
tr:last-child td { border-bottom: none; }
/* Ελαφριά εναλλαγή χρώματος ανά γραμμή + hover, για πιο εύκολο σκανάρισμα. */
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:hover td { background: var(--hover); }
/* Ο τίτλος περιορίζεται σε 2 γραμμές (με «…») ώστε όλες οι γραμμές να έχουν
   ίδιο ύψος — πιο πυκνό και πιο ευανάγνωστο. Το πλήρες κείμενο μένει διαθέσιμο
   μέσω του title="" (tooltip στο πέρασμα του ποντικιού). */
/* Το .title-cell είναι πλέον εσωτερικό span μέσα στο <td>, όχι το ίδιο το
   κελί — το line-clamp πάνω σε display:table-cell είναι αναξιόπιστο μεταξύ
   browsers (έκοβε τη 2η γραμμή στη μέση, αφήνοντας ένα θαμπό "κουτί" να
   φαίνεται). Το <td> μένει κανονικό table-cell, το span κάνει το clamp. */
.title-cell {
  max-width: 440px; overflow: hidden; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal;
}

/* Ο ΑΔΑ Διαύγειας είναι <button>, όχι <a> (χρειάζεται έλεγχο πριν ανοίξει
   σύνδεσμο — βλ. app.html) αλλά πρέπει να ΜΟΙΑΖΕΙ με τον υπόλοιπο σύνδεσμο
   του site (ίδιο χρώμα/hover με το γενικό a{}). */
.ada-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--orange); text-decoration: none; cursor: pointer;
}
.ada-link:hover { color: var(--heading); text-decoration: underline; }

/* Καρτέλα «Αναφορές» — αναζήτηση στον επίσημο κατάλογο CPV (βοηθά να βρεθεί
   ο σωστός κωδικός όταν κάποιος βγαίνει άκυρος στον έλεγχο CPV, βλ.
   .cpv-invalid πιο κάτω). Τα δεδομένα (cpv-catalog.js) φορτώνονται lazy μόνο
   όταν ανοίγει αυτή η καρτέλα — βλ. app.html. */
.cpv-catalog-block { margin-top: 14px; }
.cpv-catalog-results { max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; }
.cpv-catalog-results:not(:empty) { border: 1px solid var(--line); background: var(--surface); margin-top: 10px; }
.cpv-catalog-results table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cpv-catalog-results th, .cpv-catalog-results td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); }
.cpv-catalog-results th { background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--heading); position: sticky; top: 0; }
.cpv-catalog-results td.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: nowrap; }

/* Καρτέλα «Αναφορές» — bubbles (16/09/2026): κάθε εργαλείο (Εξαγωγή Αρχείων /
   Έλεγχος CPV / Αναζήτηση ΑΔΑΜ / Αναζήτηση CPV / Αναζήτηση ΑΛΕ) σε δική του
   κάρτα, με ενιαίο τίτλο πάνω από το περιεχόμενό της. */
.report-bubble {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-top: 14px;
}
.report-bubble:first-child { margin-top: 0; }
/* Accordion (16/09/2026, δεύτερο πέρασμα): κάθε bubble ξεκινά κλειστό — φαίνεται
   μόνο ο τίτλος — και ανοίγει με κλικ/Enter πάνω στον τίτλο. Πριν αυτό, 5
   ανοιχτά bubbles ταυτόχρονα (ειδικά με το πολύγραμμο «Έλεγχος CPV») έκαναν το
   .records-head τόσο ψηλό που έσπαγε το κλειδωμένο κέλυφος της σελίδας
   (body.app-shell overflow:hidden) — εμφανιζόταν κάθετη μπάρα κύλισης σε όλη τη
   σελίδα και οι καρτέλες πάνω σπρώχνονταν έξω από το ορατό ύψος. Βλ. JS
   `report-bubble-title` click handler στο app.html. */
.report-bubble-title {
  margin: 0; font-weight: 700; font-size: 13.5px; color: var(--heading);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; padding: 0; font-family: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.report-bubble-title:hover { color: var(--orange); }
.report-bubble-title:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.report-bubble-title::after {
  content: "▸"; font-size: 11px; color: var(--muted); flex-shrink: 0;
  transition: transform .15s ease;
}
.report-bubble.is-open .report-bubble-title::after { transform: rotate(90deg); }
.report-bubble-body { display: none; margin-top: 10px; }
.report-bubble.is-open .report-bubble-body { display: block; }

/* Έλεγχος ορίου απευθείας ανάθεσης (30.000€, καθαρή αξία) ανά έτος/ομάδα CPV —
   βλ. check-cpv-thresholds() στο app.html (Edge Function check-cpv-thresholds,
   SQL public.check_cpv_thresholds, project fsz-kimdis-history). */
.cpv-check-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cpv-check-years { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--heading); }
.cpv-check-years label { display: flex; align-items: center; gap: 4px; font-weight: 400; cursor: pointer; }
.cpv-check-results:not(:empty) { margin-top: 12px; }
.cpv-check-results .cpv-catalog-results { max-height: 420px; }
.cpv-check-actions { display: flex; gap: 8px; margin-top: 10px; }
.cpv-check-disclaimer { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.cpv-check-over { color: var(--error-text); font-weight: 700; }

/* Κωδικός CPV που δεν βρέθηκε στον επίσημο κατάλογο CPV 2008 — βλ.
   CPV_CODES στο app.html. Εμφανίζεται μόνο για λανθασμένους κωδικούς, ο
   έγκυρος κωδικός μένει σε απλό κείμενο χωρίς καμία επισήμανση. */
.cpv-invalid {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--error-bg); border: 1px solid var(--error-line); color: var(--error-text);
  border-radius: 4px; padding: 1px 6px; font-size: 12.5px; white-space: nowrap;
}

.skeleton { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); background: var(--surface); }

/* ΓΕΜΗ — προεπισκόπηση αναδόχου (popover), κλικ σε ΑΦΜ/επωνυμία στους πίνακες
   εγγραφών ή στην αλυσίδα ΑΔΑΜ. Βλ. openGemiPopover()/renderGemiPopoverContent()
   στο app.html. Καμία σκέψη τιμολόγησης/tier σε αυτό το feature προς το παρόν. */
/* text-align: left γιατί το <button> κεντράρει από προεπιλογή το κείμενό
   του — αόρατο σε μία γραμμή, αλλά κεντράρει κάθε γραμμή όταν μια μεγάλη
   επωνυμία αναδόχου "σπάει" σε 2+ γραμμές μέσα στο πλάτος της στήλης
   (Ανάδοχος), γι' αυτό κάποιες εγγραφές φαίνονταν κεντραρισμένες. */
.gemi-trigger {
  background: none; border: none; padding: 0; height: auto; font: inherit; text-align: left;
  color: var(--orange); text-decoration: underline dotted; cursor: pointer;
}
.gemi-trigger:hover { background: none; color: var(--heading); }
.gemi-trigger-inline { text-decoration: underline dotted; }

.gemi-popover {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 20, 40, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gemi-popover.hidden { display: none; }
.gemi-popover-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; max-width: 460px; width: 100%; max-height: 82vh; overflow-y: auto;
  padding: 24px 22px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.gemi-popover-close {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0;
  background: none; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 6px;
}
.gemi-popover-close:hover { background: var(--orange-soft); color: var(--heading); }
#gemi-popover-body h3 { margin: 0 24px 8px 0; font-size: 16px; color: var(--heading); }
.gemi-popover-grid { display: grid; gap: 10px 14px; margin: 14px 0 16px; }
.gemi-popover-grid > div { display: flex; flex-direction: column; gap: 2px; }
.gemi-popover-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.gemi-popover-grid dd { margin: 0; font-size: 13.5px; color: var(--heading); }
.gemi-full-link { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; }
.gemi-notfound { color: var(--heading); font-weight: 600; }
.gemi-error { color: var(--orange); font-weight: 600; }
.gemi-pill {
  display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 4px;
  padding: 2px 8px; margin-top: 2px;
}
.gemi-pill-active { background: var(--orange-soft); color: var(--orange); border: 1px solid var(--orange-border); }
.gemi-pill-inactive { background: var(--line-soft); color: var(--muted); border: 1px solid var(--line); }