/* ===========================================================================
   BASE — η μοναδική πηγή για κάθε component (buttons, inputs, dropdowns,
   tables, cards, panels, notes, γραφήματα). Οι σελίδες ΔΕΝ ορίζουν δικά τους
   στυλ: αν χρειάζεσαι κάτι καινούργιο, μπαίνει εδώ.
   Χρώματα/τύποι μόνο μέσω των μεταβλητών του tokens.css.

   Δύο κανόνες που εξηγούν τις περισσότερες αποφάσεις παρακάτω:

   1. Πλέγματα σταθερού αριθμού στηλών, όχι `auto-fit`. Το `auto-fit` τεντώνει
      την τελευταία σειρά για να γεμίσει το πλάτος, οπότε έξι κουτιά γίνονται
      πέντε κανονικά και ένα διπλάσιο — ανομοιόμορφα ύψη και πλάτη σε κάθε
      ενδιάμεσο πλάτος οθόνης. Οι αριθμοί στηλών (6/3/2) διαιρούν ακριβώς.

   2. Σταθερά ύψη για ετικέτα και υποσημείωση μέσα στα κουτιά μετρικών, ώστε
      οι τιμές να ευθυγραμμίζονται μεταξύ τους ό,τι κι αν γράφει η ετικέτα.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}

/* Το `hidden` attribute είναι ο τρόπος που το app κρύβει πράγματα από τη
   javascript. Χωρίς `!important` κάθε κλάση με `display:` παρακάτω το νικάει
   (η δήλωση του browser έχει μικρότερη προτεραιότητα από κάθε δικό μας
   κανόνα), και το φίλτρο «κρύβει» στοιχεία που μένουν ορατά. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 60px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  background:var(--void);
  color:var(--ice);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--glow);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Type ---------------------------------------------------------------- */
h1,h2{font-family:var(--font-display);font-weight:200;letter-spacing:.02em;margin:0}
h1{font-size:var(--fs-h1);margin-bottom:6px}
h2{font-size:var(--fs-h2);margin:32px 0 14px}

/* Mono eyebrow — «η φωνή της μέτρησης». Χωρίς κεφαλαία: στα ελληνικά τα
   κεφαλαία χάνουν τόνους και σε 12px με αραιό tracking διαβάζονται χειρότερα
   από ό,τι κερδίζουν σε ύφος. Το mono και το tracking κρατούν τον χαρακτήρα. */
h3,.label{
  font-family:var(--font-mono);
  font-size:var(--fs-h3);
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ice-faint);
  margin:0 0 14px;
}
.mono{font-family:var(--font-mono)}
.sub{color:var(--ice-soft);margin:0 0 26px;font-size:var(--fs-small);max-width:80ch}
.muted{color:var(--ice-soft)}
.faint{color:var(--ice-faint)}
code{font-family:var(--font-mono);font-size:.92em;color:var(--glow)}

/* --- Layout -------------------------------------------------------------- */
main{max-width:var(--maxw);margin:0 auto;padding:24px var(--gutter) 72px}
footer{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 48px;
  color:var(--ice-faint);font-size:var(--fs-small)}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px var(--gutter);
  background:var(--void-2);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Στο κινητό: λογότυπο και έξοδος πάνω, ναυσιπλοΐα από κάτω σε δική της σειρά.
   Τρία στοιχεία σε μία σειρά δεν χωράνε σε 375px χωρίς να κοπεί κάτι. */
@media (max-width:640px){
  .topbar{gap:8px 12px;padding:12px var(--gutter)}
  .topbar nav{order:3;flex-basis:100%;margin-left:0;gap:16px}
  .topbar form.logout{order:2}
  .tab.is-active::after{bottom:-6px}
  /* Το «+ Νέο ακίνητο» της μπάρας φεύγει: κάθε σελίδα έχει ήδη το ίδιο κουμπί
     στην επικεφαλίδα της, και εδώ το μόνο που πετύχαινε ήταν να σπάει τη
     ναυσιπλοΐα σε τρίτη σειρά. */
  .topbar nav .btn-primary{display:none}
}
.brand{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ice);
}
.brand:hover{text-decoration:none;color:var(--glow)}

/* Δύο πάνελ δίπλα-δίπλα. Ίσο ύψος επίτηδες: με περίγραμμα, οι κουτσουρεμένες
   βάσεις φαίνονται λάθος πολύ περισσότερο από ό,τι ένα κενό αποτύπωμα. */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}}

/* --- Επικεφαλίδα σελίδας ------------------------------------------------- */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pagehead .titles{min-width:0;flex:1 1 420px}
.pagehead .sub{margin-bottom:0}
.pagehead-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.stack{margin-bottom:22px}

/* --- Panel --------------------------------------------------------------- */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:18px;
}
.panel > h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-flush{padding:0;overflow:hidden}
.panel-flush > h3{padding:20px 22px 0;margin-bottom:14px}
.panel-foot{padding:0 22px 18px}

/* Πάνελ που ανοίγει μόνο όταν το θες. Οι ρυθμίσεις και οι πίνακες δανείου δεν
   χρειάζεται να καταλαμβάνουν οθόνη κάθε φορά που κοιτάς μια απόδοση. */
details.fold{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:18px}
details.fold > summary{
  list-style:none;cursor:pointer;padding:16px 22px;
  font-family:var(--font-mono);font-size:var(--fs-h3);letter-spacing:.08em;
  color:var(--ice-faint);display:flex;align-items:center;gap:10px;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{
  content:"";width:7px;height:7px;flex:0 0 7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);margin-top:-2px;
  transition:transform .18s var(--ease);
}
details.fold[open] > summary::before{transform:rotate(45deg);margin-top:-4px}
details.fold > summary:hover{color:var(--ice)}
details.fold > .fold-body{padding:0 22px 20px}

/* --- Κουτιά μετρικών ----------------------------------------------------- */
/* Έξι στήλες, μετά τρεις, μετά δύο. Και οι τρεις διαιρούν το έξι, άρα καμία
   σειρά δεν μένει μισή και κανένα κουτί δεν φουσκώνει για να γεμίσει κενό. */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px}
@media (max-width:1240px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;flex-direction:column;
  min-width:0;
}
.stat .label{
  margin:0 0 8px;line-height:1.35;
  min-height:var(--stat-label-h);
  display:flex;align-items:flex-end;
}
.stat .value{
  font-family:var(--font-mono);
  font-size:var(--fs-metric);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.15;
  overflow-wrap:anywhere;
}
/* `margin-top:auto`: η υποσημείωση κολλάει στον πάτο του κουτιού. Τα κουτιά
   έχουν ίδιο ύψος, άρα οι υποσημειώσεις ευθυγραμμίζονται ακόμα κι όταν ένα
   κουτί έχει μπάρα από πάνω και τα άλλα όχι. */
.stat .hint{
  font-size:var(--fs-small);color:var(--ice-faint);
  line-height:1.4;margin-top:auto;padding-top:8px;
  min-height:var(--stat-hint-h);
}
.stat.hero{border-color:var(--line-2);box-shadow:inset 0 0 0 1px var(--halo)}
.stat.hero .value{color:var(--glow)}

/* --- Μπάρα απόδοσης σε σχέση με τον στόχο -------------------------------- */
/* Το πλήρες πλάτος είναι 2x ο στόχος, οπότε η εγκοπή του στόχου πέφτει πάντα
   στη μέση: η ίδια εικόνα σημαίνει το ίδιο πράγμα σε κάθε γραμμή. */
.bar{display:block;width:100%;height:6px;margin-top:10px;overflow:visible}
.bar .track{fill:var(--line-2)}
.bar .fill{fill:var(--ice-faint)}
.bar.good .fill{fill:var(--good)}
.bar.mid  .fill{fill:var(--warn)}
.bar.bad  .fill{fill:var(--bad)}
.bar .mark{fill:var(--ice-soft)}
.bar-legend{display:flex;justify-content:space-between;gap:8px;
  font-size:11px;color:var(--ice-faint);margin-top:5px}

/* --- Κλίμακα τιμών (ζήτηση / η τιμή μου / ταβάνι) ------------------------ */
/* Όλα τα σχήματα είναι rect και όχι line/circle: το SVG τεντώνεται στο πλάτος
   του γονιού (`preserveAspectRatio="none"`), οπότε ένα stroke ή ένας κύκλος θα
   παραμορφωνόταν. Οι ετικέτες ζουν σε HTML από κάτω, όχι μέσα στο SVG. */
.ladder{display:block;width:100%;height:44px;margin:4px 0 0}
.ladder .axis{fill:var(--line-2)}
.ladder .band{fill:var(--bad);opacity:.18}
.ladder .band.ok{fill:var(--good)}
.ladder .pin{fill:var(--ice-faint)}
.ladder .pin.price{fill:var(--glow)}
.ladder .pin.max{fill:var(--good)}
.ladder-legend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;padding:0;list-style:none}
.ladder-legend li{font-size:var(--fs-small);color:var(--ice-soft)}
.ladder-legend b{display:block;font-family:var(--font-mono);font-size:15px;
  font-weight:300;color:var(--ice);margin-top:2px}
.ladder-legend .k{display:inline-flex;align-items:center;gap:6px}
.ladder-legend .k::before{content:"";width:8px;height:8px;border-radius:2px;
  background:var(--ice-faint)}
.ladder-legend .k.price::before{background:var(--glow)}
.ladder-legend .k.max::before{background:var(--good)}

/* --- Γράφημα ταμειακών ροών ---------------------------------------------- */
.chart{display:block;width:100%;height:120px}
.chart .zero{fill:var(--line-2)}
.chart .b{fill:var(--good);opacity:.85}
.chart .b.neg{fill:var(--bad)}
.chart-axis{display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;color:var(--ice-faint);margin-top:6px}

/* --- Κατανομή χαρτοφυλακίου ---------------------------------------------- */
.alloc{display:block;width:100%;height:14px;border-radius:4px;overflow:hidden;margin-bottom:12px}
.alloc rect{fill:var(--glow-deep)}
.alloc rect.s1{fill:color-mix(in srgb,var(--glow) 62%,var(--surface))}
.alloc rect.s2{fill:color-mix(in srgb,var(--glow) 44%,var(--surface))}
.alloc rect.s3{fill:color-mix(in srgb,var(--glow) 30%,var(--surface))}
.alloc rect.s4{fill:color-mix(in srgb,var(--glow) 20%,var(--surface))}
.alloc rect.s5{fill:color-mix(in srgb,var(--glow) 12%,var(--surface))}
.alloc-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;
  font-size:var(--fs-small);color:var(--ice-soft)}
.alloc-legend li{display:flex;align-items:center;gap:8px}
.alloc-legend i{width:9px;height:9px;border-radius:2px;background:var(--glow-deep);flex:0 0 9px}
.alloc-legend .s1{background:color-mix(in srgb,var(--glow) 62%,var(--surface))}
.alloc-legend .s2{background:color-mix(in srgb,var(--glow) 44%,var(--surface))}
.alloc-legend .s3{background:color-mix(in srgb,var(--glow) 30%,var(--surface))}
.alloc-legend .s4{background:color-mix(in srgb,var(--glow) 20%,var(--surface))}
.alloc-legend .s5{background:color-mix(in srgb,var(--glow) 12%,var(--surface))}
.alloc-legend b{font-family:var(--font-mono);font-weight:300;color:var(--ice-faint)}

/* --- Κάρτα υποψηφίου ----------------------------------------------------- */
/* Η όψη «κάρτες» της λίστας: μία απόφαση ανά κουτί. Ο πίνακας συγκρίνει, η
   κάρτα κρίνει — γι' αυτό υπάρχουν και τα δύο και όχι μόνο το ένα. */
.deals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
/* Τρεις κάρτες θέλουν χώρο για το όνομα ΚΑΙ την ετυμηγορία στην ίδια γραμμή.
   Κάτω από αυτό το πλάτος πέφτουμε σε δύο, αντί να στριμώχνονται. */
@media (max-width:1320px){.deals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.deals{grid-template-columns:minmax(0,1fr)}}

.deal{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px 16px;
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
  transition:border-color .15s var(--ease);
}
.deal:hover{border-color:var(--line-2)}
/* Αν το όνομα και η ετυμηγορία δεν χωράνε μαζί, η ετυμηγορία κατεβαίνει
   ολόκληρη σε δική της γραμμή αντί να κοπεί στην άκρη της κάρτας. */
.deal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;
  flex-wrap:wrap}
.deal-head > div:first-child{flex:1 1 60%;min-width:0}
.deal-name{font-size:16px;font-weight:300;color:var(--ice);line-height:1.3;
  overflow-wrap:anywhere}
.deal-name a{color:inherit}
.deal-name a:hover{color:var(--glow);text-decoration:none}
.deal-where{font-size:12px;color:var(--ice-faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-figure{display:flex;align-items:baseline;gap:10px}
.deal-figure .big{font-family:var(--font-mono);font-size:30px;font-weight:300;
  line-height:1;letter-spacing:-.01em}
.deal-figure .cap{font-size:var(--fs-small);color:var(--ice-faint)}
.deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
/* `auto-fill` και όχι `auto-fit`: αν περισσέψει χώρος μένει κενή στήλη αντί να
   φουσκώσει το τελευταίο ζευγάρι σε διπλάσιο πλάτος από τα υπόλοιπα. */
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px 20px;
  margin-top:18px}
.kvgrid .kv .v{font-size:16px;white-space:normal}
.kv{min-width:0}
.kv .k{display:block;font-size:11px;color:var(--ice-faint);margin-bottom:2px}
.kv .v{font-family:var(--font-mono);font-size:14px;white-space:nowrap}
.deal-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* --- Toolbar (αναζήτηση, φίλτρα, όψη) ------------------------------------ */
.toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.toolbar .grow{flex:1 1 220px;min-width:180px}
.toolbar input[type=search]{
  width:100%;padding:8px 11px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--void-2);color:var(--ice);
  font-family:var(--font-body);font-size:14px;font-weight:300;
}
.toolbar input[type=search]:focus{outline:none;border-color:var(--glow-deep);
  box-shadow:0 0 0 3px var(--halo)}
.toolbar .count{font-family:var(--font-mono);font-size:12px;color:var(--ice-faint);
  white-space:nowrap}

/* Segmented control — «κάρτες / πίνακας» και τα φίλτρα ναι-όχι */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  overflow:hidden}
.seg button{
  appearance:none;border:none;background:transparent;color:var(--ice-soft);
  font-family:var(--font-body);font-size:13px;font-weight:300;
  padding:7px 13px;cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.seg button + button{border-left:1px solid var(--line-2)}
.seg button:hover{background:var(--surface-2);color:var(--ice)}
.seg button[aria-pressed=true]{background:var(--halo);color:var(--glow)}
.seg button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--glow-deep)}

/* --- Tables -------------------------------------------------------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:collapse;font-size:var(--fs-data)}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
td{font-family:var(--font-mono);font-weight:300}
th{
  font-family:var(--font-mono);font-size:var(--fs-h3);font-weight:400;
  letter-spacing:.06em;color:var(--ice-faint);vertical-align:bottom;
}
th:first-child,td:first-child{text-align:left;font-family:var(--font-body)}
tbody tr:hover{background:var(--surface-2)}
tfoot td{border-top:1px solid var(--line-2);border-bottom:none;color:var(--ice)}
tfoot td:first-child{font-family:var(--font-body)}
.num-pos{color:var(--good)}
.num-neg{color:var(--bad)}
.t-note{color:var(--ice-faint);font-size:var(--fs-small);margin:14px 0 0;line-height:1.6;
  max-width:90ch}

/* Επικεφαλίδα που μένει ορατή όσο κυλάς έναν μακρύ πίνακα */
.table-sticky thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.panel .table-sticky thead th{top:0}

/* Ταξινόμηση με κλικ. Ο δείκτης είναι μέρος του κουμπιού, ώστε να μη
   χοροπηδάει η στήλη όταν αλλάζει φορά. */
th.sortable{cursor:pointer;user-select:none}
th.sortable .th-in{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
th:first-child.sortable .th-in{justify-content:flex-start}
th.sortable:hover{color:var(--ice-soft)}
th.sortable .arrow{opacity:0;font-size:9px;transition:opacity .15s var(--ease)}
th.sortable:hover .arrow{opacity:.4}
th.sortable[aria-sort]:not([aria-sort=none]){color:var(--ice)}
th.sortable[aria-sort]:not([aria-sort=none]) .arrow{opacity:1;color:var(--glow)}

.t-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-name .tag{margin-left:0}

/* --- Πίνακας ευαισθησίας ------------------------------------------------- */
/* Το χρώμα εδώ δεν είναι στολίδι: δείχνει πού πέφτει κάθε σενάριο σε σχέση με
   τον στόχο σου, ώστε να διαβάζεις το σχήμα και όχι 25 νούμερα. */
.heat td{transition:background .15s var(--ease)}
.heat td.h2 {background:color-mix(in srgb,var(--good) 26%,transparent);color:var(--ice)}
.heat td.h1 {background:color-mix(in srgb,var(--good) 13%,transparent)}
.heat td.h0 {background:color-mix(in srgb,var(--warn) 12%,transparent)}
.heat td.hm1{background:color-mix(in srgb,var(--bad) 13%,transparent)}
.heat td.hm2{background:color-mix(in srgb,var(--bad) 26%,transparent);color:var(--ice)}
.heat td.base{box-shadow:inset 0 0 0 1px var(--glow);color:var(--ice)}
/* Ο σταυρός του σεναρίου σου: η σειρά και η στήλη που τέμνονται στο κελί σου. */
.heat th.base,.heat tr.base > th{color:var(--glow)}
.heat tbody th{white-space:nowrap}
.heat-legend{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:11px;color:var(--ice-faint);flex-wrap:wrap}
.heat-legend i{width:22px;height:9px;border-radius:2px;display:inline-block}
.heat-legend .hm2{background:color-mix(in srgb,var(--bad) 26%,var(--surface))}
.heat-legend .hm1{background:color-mix(in srgb,var(--bad) 13%,var(--surface))}
.heat-legend .h0{background:color-mix(in srgb,var(--warn) 12%,var(--surface))}
.heat-legend .h1{background:color-mix(in srgb,var(--good) 13%,var(--surface))}
.heat-legend .h2{background:color-mix(in srgb,var(--good) 26%,var(--surface))}

/* --- Forms: inputs, dropdowns, checkboxes -------------------------------- */
/* `align-items:start` ώστε ένα πεδίο με μεγάλη βοήθεια να μη σπρώχνει τα
   διπλανά του: οι ετικέτες και τα πλαίσια μένουν σε μία γραμμή. */
form .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;
  align-items:start}
/* Η διεύθυνση σε τέσσερα πεδία: η οδός και η πόλη θέλουν χώρο, ο αριθμός και
   ο ΤΚ δεν θέλουν. */
form .row-address{grid-template-columns:2.2fr 1fr 2fr 1fr}
@media (max-width:900px){form .row-address{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){form .row-address{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1100px){form .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){form .row{grid-template-columns:minmax(0,1fr)}}
.field{min-width:0}
label{display:block;font-size:var(--fs-small);color:var(--ice-soft);margin-bottom:5px}
.field .help{font-size:12px;color:var(--ice-faint);margin-top:5px;line-height:1.5}

input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:var(--void-2);
  color:var(--ice);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:300;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input[type=text],input[type=password],input[type=search],textarea{font-family:var(--font-body)}
input::placeholder,textarea::placeholder{color:var(--ice-faint)}
input:hover,select:hover,textarea:hover{border-color:var(--ice-faint)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--glow-deep);
  box-shadow:0 0 0 3px var(--halo);
}
textarea{resize:vertical;line-height:1.6}

/* Dropdown — ίδιο πλαίσιο με τα inputs, δικό μας βελάκι */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6a77' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
  cursor:pointer;
}
select option{background:var(--surface);color:var(--ice)}

/* Checkbox. Το κενό από πάνω ισοφαρίζει την ετικέτα των διπλανών πεδίων, ώστε
   το κουτάκι να κάθεται στη γραμμή των inputs και όχι πιο ψηλά. */
.check{display:flex;align-items:center;gap:10px;min-height:38px;margin-top:23px}
.check label{margin:0;color:var(--ice);font-size:14px;cursor:pointer}
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:0 0 18px;margin:0;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:var(--void-2);
  cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
input[type=checkbox]:hover{border-color:var(--ice-faint)}
input[type=checkbox]:checked{background:var(--glow);border-color:var(--glow)}
input[type=checkbox]:checked::after{
  content:"";display:block;
  width:5px;height:9px;margin:2px auto 0;
  border:solid var(--void);border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--halo)}

fieldset{border:none;padding:0;margin:0}

/* Ενότητα που δεν ισχύει με τις τρέχουσες επιλογές: μένει ορατή (για να ξέρεις
   τι υπάρχει) αλλά σβήνει και δεν δέχεται κλικ — αλλιώς η σελίδα χοροπηδάει
   κάθε φορά που πατάς ένα checkbox. */
.dependent{transition:opacity .18s var(--ease)}
.dependent[data-off]{opacity:.32;pointer-events:none}
.dependent[data-off] input,.dependent[data-off] select{filter:grayscale(1)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--ice);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:300;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.btn:hover{text-decoration:none;border-color:var(--ice-faint);background:var(--surface-2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--halo)}
.btn-sm{padding:6px 12px;font-size:13px}

.btn-primary{background:var(--glow);border-color:var(--glow);color:var(--void);font-weight:400}
.btn-primary:hover{background:var(--glow);border-color:var(--glow);
  color:var(--void);box-shadow:0 0 24px -6px var(--glow)}

.btn-danger:hover{border-color:var(--bad);color:var(--bad);background:transparent}

.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
.actions form{display:inline}
/* Οι επικίνδυνες ενέργειες μακριά από τις καθημερινές, όχι δίπλα τους. */
.actions .spacer{flex:1 1 40px}

/* --- Notes / tags / σημαίες ---------------------------------------------- */
.note{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:2px solid var(--glow-deep);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:14px 16px;
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--ice-soft);
}
.note strong{color:var(--ice);font-weight:400}
.note.warn{border-left-color:var(--warn)}
.note.bad{border-left-color:var(--bad)}
.note ul{margin:8px 0 0;padding-left:18px}
.note li{margin-bottom:3px}
.note + .note{margin-top:12px}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;
  padding:2px 8px;border-radius:20px;
  border:1px solid var(--line-2);
  color:var(--ice-faint);
  margin-left:8px;vertical-align:middle;
}
.tag-accent{color:var(--glow);border-color:var(--glow-deep)}

/* Σημαίες ποιότητας δεδομένων. Ό,τι λείπει αλλάζει το νούμερο, οπότε στέκεται
   δίπλα στο νούμερο. */
.flags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.flag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11px;
  padding:2px 8px;border-radius:20px;
  border:1px solid var(--warn);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  cursor:help;
}
.flag.bad{border-color:var(--bad);color:var(--bad);
  background:color-mix(in srgb,var(--bad) 10%,transparent)}
.flaglist{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.flaglist li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);
  color:var(--ice-soft);line-height:1.5}
.flaglist .flag{flex:0 0 auto;cursor:default}

.settings-form{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.settings-form .field{flex:1 1 230px;min-width:230px;margin:0}

/* --- Άδειες καταστάσεις -------------------------------------------------- */
.empty{
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--radius);
  padding:38px 24px;text-align:center;margin-bottom:18px;
}
.empty p{color:var(--ice-soft);margin:0 0 18px;font-size:var(--fs-small);
  max-width:56ch;margin-left:auto;margin-right:auto;line-height:1.65}
.empty h3{justify-content:center;display:flex;margin-bottom:10px}

/* --- Πλοήγηση ενοτήτων (καρτέλα ακινήτου) ------------------------------- */
.subnav{
  position:sticky;top:var(--topbar-h);z-index:30;
  display:flex;gap:4px;overflow-x:auto;
  background:var(--void);
  border-bottom:1px solid var(--line);
  margin:0 0 20px;padding:8px 0;
  scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  padding:6px 12px;border-radius:var(--radius-sm);
  font-size:13px;color:var(--ice-soft);white-space:nowrap;
}
.subnav a:hover{background:var(--surface);color:var(--ice);text-decoration:none}
.subnav a.is-current{background:var(--surface-2);color:var(--glow)}

/* --- Scrollbars ---------------------------------------------------------- */
.tablewrap{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-track{background:transparent}
.tablewrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.tablewrap::-webkit-scrollbar-thumb:hover{background:var(--ice-faint)}

/* --- Utilities (αντί για inline styles στα templates) -------------------- */
.unit{opacity:.65;font-weight:300}
.value .unit{font-size:.5em;margin-left:4px}
.notes-body{white-space:pre-wrap;margin:0;color:var(--ice-soft)}
tbody th{
  text-align:left;font-family:var(--font-mono);color:var(--ice-soft);
  letter-spacing:.04em;font-size:var(--fs-data);
}
.panel .note{margin-top:16px}
.panel .note:first-of-type{margin-top:0}
.check-lead{margin-top:0;margin-bottom:16px}
.t-note:last-child{margin-bottom:0}
.row-strong td{color:var(--ice)}
.row-strong td:first-child{font-weight:400}

/* Chip — μικρό clickable πρόθεμα τιμής */
.chip{
  display:inline-block;margin:4px 6px 0 0;padding:4px 10px;
  border:1px solid var(--line-2);border-radius:20px;
  background:transparent;color:var(--ice-soft);
  font-family:var(--font-mono);font-size:11px;cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.chip:hover{border-color:var(--glow-deep);color:var(--glow)}

.link-btn{font-size:12px}

/* --- Tabs ---------------------------------------------------------------- */
.tab{
  position:relative;padding:6px 2px;color:var(--ice-soft);font-size:14px;
}
.tab:hover{color:var(--ice);text-decoration:none}
.tab.is-active{color:var(--ice)}
.tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:var(--glow);
}
.tab .n{font-family:var(--font-mono);font-size:11px;color:var(--ice-faint);margin-left:5px}

/* --- Ζωντανό πάνελ υπολογισμού ------------------------------------------ */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.live{position:sticky;top:calc(var(--topbar-h) + 16px)}
.live .panel{margin-bottom:12px}
.live-metric{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.live-metric:last-child{border-bottom:none}
.live-metric .k{font-size:13px;color:var(--ice-soft)}
.live-metric .v{font-family:var(--font-mono);font-size:15px;white-space:nowrap}
.live-metric.lead .v{font-size:22px;color:var(--glow)}
.live-metric .v.flash{animation:flash .5s var(--ease)}
@keyframes flash{0%{color:var(--glow);text-shadow:0 0 12px var(--halo)}100%{}}
.live-foot{font-size:12px;color:var(--ice-faint);margin:10px 0 0;line-height:1.5}
@media (max-width:1000px){
  .editor{grid-template-columns:minmax(0,1fr)}
  .live{position:static}
}

/* --- Verdict pill -------------------------------------------------------- */
.verdict{display:inline-block;padding:3px 11px;border-radius:20px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;white-space:nowrap}
.verdict.good{color:var(--good);border:1px solid var(--good);
  background:color-mix(in srgb,var(--good) 10%,transparent)}
.verdict.mid{color:var(--warn);border:1px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.verdict.bad{color:var(--bad);border:1px solid var(--bad);
  background:color-mix(in srgb,var(--bad) 10%,transparent)}

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .5s var(--ease) both}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .actions{gap:8px}
  main{padding-top:18px}
  /* Η μπάρα εργαλείων γίνεται στήλη: σε μία σειρά τα φίλτρα ξεχείλιζαν και το
     τρίτο κοβόταν στην άκρη της οθόνης. Τα κουμπιά μοιράζονται το πλάτος και
     το κείμενο αναδιπλώνεται μέσα τους. */
  .toolbar{padding:10px 12px;flex-direction:column;align-items:stretch}
  /* Σε στήλη, το `flex:1 1 220px` του .grow σημαίνει 220px ΥΨΟΣ, όχι πλάτος:
     το πεδίο αναζήτησης γινόταν ένα τεράστιο κενό κουτί. */
  .toolbar .grow{flex:0 0 auto;width:100%;min-width:0}
  .toolbar .seg{width:100%}
  .toolbar .seg button{flex:1 1 0;justify-content:center;text-align:center;
    white-space:normal;line-height:1.25;padding:8px 6px}
  .toolbar .count{text-align:right}
}

/* --- Σύνδεση ------------------------------------------------------------- */
/* Η οθόνη πριν μπεις. Ίδια λογική με το Aether: σκούρο έδαφος, ένα κουτί στο
   κέντρο, thin display τίτλος, mono ετικέτες, ένα κουμπί στο χρώμα του brand.
   Αντικατέστησε το γκρι παράθυρο του basic auth, που δεν είναι σελίδα και δεν
   έχει έξοδο. */
.auth-shell{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.auth-card{
  width:380px;max-width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px}
.auth-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  color:var(--ice-faint);
}
.auth-title{
  font-family:var(--font-display);font-weight:200;font-size:24px;
  letter-spacing:.06em;margin:0;
}
.auth-note{color:var(--ice-soft);font-size:13px;text-align:center;margin:0;line-height:1.55}
.auth-error{color:var(--bad);font-size:12.5px;text-align:center;margin:12px 0 0}
.auth-form{margin-top:18px}
.auth-form label{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ice-faint)}
.auth-label-spaced{margin-top:14px}
.auth-submit{width:100%;justify-content:center;margin-top:18px;padding:12px}
.auth-submit[disabled],.auth-form input[disabled]{opacity:.5;cursor:not-allowed}

/* Η έξοδος, στη μπάρα. Form και όχι link: ένα GET το πατάει και ένας prefetch. */
.topbar form.logout{display:inline}