/* VoltGaia — δύο θέματα, ίδια σημασία.

   ΠΩΣ ΔΟΥΛΕΥΕΙ:
   Οι μεταβλητές κρατούν το ίδιο ΝΟΗΜΑ και στα δύο θέματα («το κύριο κείμενο»,
   «η γραμμή», «το κακό νέο»). Αλλάζει μόνο η τιμή τους. Έτσι μια αλλαγή
   παλέτας είναι δύο μπλοκ εδώ, όχι 150 σημεία στον κώδικα.

   ΓΙΑΤΙ ΛΕΓΕΤΑΙ --accent ΚΑΙ ΟΧΙ --sun:
   Ήταν αμπέρ και το όνομα περιέγραφε το χρώμα. Τώρα είναι μπλε. Ένα token που
   λέγεται «ήλιος» και δίνει μπλε είναι παγίδα για τον επόμενο — το όνομα
   περιγράφει πλέον τον ΡΟΛΟ (κύρια έμφαση), όχι την απόχρωση.

   ΤΑ ΧΡΩΜΑΤΑ ΤΟΥ ΦΩΤΕΙΝΟΥ ΔΕΝ ΔΙΑΛΕΧΤΗΚΑΝ ΜΕ ΤΟ ΜΑΤΙ:
   κάθε ένα μετρήθηκε ώστε ο λόγος αντίθεσης πάνω στο λευκό να ξεπερνά το 4,5:1
   που ορίζει το WCAG AA — και το --accent επιπλέον να αντέχει ΛΕΥΚΟ κείμενο
   από πάνω, γιατί είναι και γέμισμα κουμπιού.

   --on-accent: το κείμενο ΠΑΝΩ σε χρωματιστό γέμισμα. Και στα δύο θέματα τα
   γεμίσματα είναι πλέον αρκετά σκούρα ώστε να θέλουν λευκό. */
:root{
  --bg:#0D1117; --panel:#161B22; --panel2:#1E252F; --line:#2C333D;
  --txt:#E6EDF3; --muted:#8B949E;
  --accent:#3B82F6; --accent2:#7AB0FF;
  --green:#3FB950; --red:#F85149; --orange:#DB8B2A; --blue:#38BDF8; --yellow:#D4A017;
  /* Στο σκούρο θέμα το μπλε είναι φωτεινό, άρα θέλει ΣΚΟΥΡΟ κείμενο από πάνω
     (5,15 έναντι 3,68 με λευκό). Πιο σκούρο μπλε θα δεχόταν λευκό, αλλά τότε
     το ίδιο το μπλε πέφτει στο 2,8 ως κείμενο πάνω στο σκούρο φόντο. */
  --on-accent:#0D1117;
  --inset:rgba(0,0,0,.22);
  --overlay:rgba(1,4,9,.75);
  --shadow:rgba(1,4,9,.5);
  --thumb-a:#233043; --thumb-b:#182231;
  color-scheme:dark;
}

/* ΦΩΤΕΙΝΟ ΘΕΜΑ.
   Οι τιμές δεν διαλέχτηκαν με το μάτι: κάθε χρώμα κειμένου ελέγχθηκε ώστε ο
   λόγος αντίθεσης πάνω στο λευκό να ξεπερνά το 4,5:1. */
:root[data-theme="light"]{
  --bg:#F6F8FA; --panel:#FFFFFF; --panel2:#EFF2F6; --line:#D0D7DE;
  --txt:#1F2328; --muted:#57606A;
  --accent:#1F5FD0; --accent2:#1A4FAE;
  --green:#1A7F37; --red:#CF222E; --orange:#8A5A00; --blue:#0969DA; --yellow:#7D5A00;
  --on-accent:#FFFFFF;
  --inset:rgba(31,35,40,.05);
  --overlay:rgba(31,35,40,.5);
  --shadow:rgba(31,35,40,.16);
  --thumb-a:#DCE6F5; --thumb-b:#C3D4EC;
  color-scheme:light;
}
/* ΚΑΜΙΑ ομαλή κύλιση: η αλλαγή καρτέλας πρέπει να είναι ακαριαία. Το animation
   κάνει τον χρήστη να περιμένει και σε ορισμένα περιβάλλοντα ακυρώνει εντελώς
   το προγραμματιστικό scroll. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* Header */
header.top{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
header.top img{width:38px;height:38px}
.brand{font-weight:700;font-size:18px;letter-spacing:-.2px}
.brand small{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.badge{margin-left:auto;background:rgba(59,130,246,.12);color:var(--accent2);border:1px solid rgba(59,130,246,.35);
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.3px}
.badge.live{background:rgba(63,185,80,.12);color:var(--green);border-color:rgba(63,185,80,.35)}

/* Tabs */
/* Εννιά καρτέλες σε μία σειρά, χωρίς να κόβεται καμία: λίγο πιο σφιχτό padding
   στο desktop. Μια κομμένη ετικέτα στα δεξιά δείχνει αμέλεια — και μια μόνη της
   σε δεύτερη σειρά επίσης. */
/* ΟΙ ΚΑΡΤΕΛΕΣ ΚΟΛΛΑΝΕ ΣΤΗΝ ΚΟΡΥΦΗ.
   Πριν, βρίσκονταν χαμηλά (μετά το μπάνερ και τις οδηγίες): κάθε αλλαγή καρτέλας
   πετούσε τον χρήστη στην κορυφή και έπρεπε να ξανακατέβει με το χέρι για να τις
   ξαναβρεί. Τώρα είναι πάντα εκεί, όπου κι αν βρίσκεσαι στη σελίδα. */
nav.tabs{display:flex;gap:2px;padding:14px 0 0;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:0;z-index:30;background:var(--bg);
  box-shadow:0 1px 0 var(--line)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:15px;font-weight:600;
  padding:12px 10px;min-height:46px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
nav.tabs button:hover{color:var(--txt)}
nav.tabs button.on{color:var(--accent2);border-bottom-color:var(--accent);background:var(--panel)}
nav.tabs button .dot-n{background:var(--red);color:#fff;font-size:12px;padding:1px 6px;border-radius:999px;margin-left:6px;font-weight:800}

/* Status chips (Huawei-style) */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px;text-align:center;cursor:pointer}
.chip.on{border-color:var(--accent);background:rgba(59,130,246,.08)}
.chip b{display:block;font-size:22px;font-weight:700;line-height:1.1}
.chip span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chip.normal b{color:var(--green)} .chip.faulty b{color:var(--red)} .chip.offline b{color:var(--muted)}

/* Park cards (fleet) */
.parks{display:grid;gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;cursor:pointer;
  display:flex;gap:14px;align-items:center;transition:border-color .15s}
.pcard:hover{border-color:var(--accent)}
.pcard .thumb{width:56px;height:56px;border-radius:6px;background:linear-gradient(135deg,var(--thumb-a),var(--thumb-b));
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.pcard .info{flex:1;min-width:0}
.pcard .nm{font-weight:700;font-size:16px}
.pcard .loc{font-size:13px;color:var(--muted);margin-bottom:6px}
.pcard .mini{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pcard .mini b{color:var(--txt);font-weight:700}
.pcard .money{text-align:right;flex-shrink:0}
.pcard .money .rev{font-size:20px;font-weight:800;color:var(--green)}
.pcard .money .lost{font-size:13px;font-weight:700;color:var(--red)}
.pcard .money small{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.st{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.st.normal{background:rgba(63,185,80,.15);color:var(--green)}
.st.faulty{background:rgba(255,90,95,.15);color:var(--red)}
.st.offline{background:rgba(138,151,166,.15);color:var(--muted)}

/* ΠΥΚΝΟΤΗΤΑ: στρογγυλάδα 8px αντί 14px, πιο σφιχτό padding, βάρος 700 αντί
   800. Οι μεγάλες καμπύλες και τα πολύ έντονα γράμματα διαβάζονται ως
   καταναλωτική εφαρμογή· ο αγοραστής εδώ είναι διευθυντής ενέργειας. */
/* KPI grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:6px}
.kpi{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.4px}
.kpi.sm{font-size:23px}
.sub{font-size:13px;color:var(--muted);margin-top:4px}
.pos{color:var(--green)} .neg{color:var(--red)} .warn{color:var(--orange)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* Waterfall — σκρολάρει μέσα στο δικό του πλαίσιο, ποτέ δεν σπάει τη σελίδα */
.wf-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.wf{display:flex;align-items:flex-end;gap:2px;height:240px;margin-top:14px;position:relative;min-width:520px}
/* min-width:0 — χωρίς αυτό το πλάτος της στήλης το όριζε η ΛΕΞΗ της
   ετικέτας («Πραγματικά» = 62px στα 11px), όχι ο διαθέσιμος χώρος. Το
   γράφημα ξεχείλιζε 8px και έκοβε την τελευταία ετικέτα σε «Πραγματικ». */
.wf .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.wf .bar{width:100%;border-radius:4px 4px 0 0;position:relative}
.wf .spacer{width:100%}
.wf .lbl{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.25;
  min-height:32px;overflow-wrap:anywhere}
.wf .val{font-size:13px;font-weight:800;margin-bottom:4px;white-space:nowrap}
.wf-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.wf-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}

/* Bars chart */
/* Κλίμακα και ημερομηνίες γύρω από το ραβδόγραμμα. */
.chart-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);
  margin-top:6px}
.chart-top b{color:var(--txt)}
.bars-wrap{position:relative}
/* Γραμμή στο μισό ύψος — σημείο αναφοράς, όχι διακόσμηση. */
.bars-grid{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);
  pointer-events:none}
.bars-dates{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  margin-top:6px}

.bars{display:flex;align-items:flex-end;gap:3px;height:130px;margin-top:10px}
.bars .b{flex:1;border-radius:3px 3px 0 0;min-height:2px;background:linear-gradient(180deg,var(--accent2),var(--accent));position:relative}
.bars .b.fault{background:linear-gradient(180deg,#ff8a8d,var(--red))}
.bars .b .cut{position:absolute;left:0;right:0;bottom:100%;background:repeating-linear-gradient(45deg,rgba(255,159,67,.7),rgba(255,159,67,.7) 3px,transparent 3px,transparent 6px);border-radius:3px 3px 0 0}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}

/* Hour heat (curtailment by hour) */
.hours{display:flex;gap:2px;margin-top:10px;padding-bottom:20px}
.hours .h{flex:1;height:44px;border-radius:3px;background:var(--panel2);position:relative}
/* Η ώρα αιχμής: περίγραμμα αντί για «λίγο πιο σκούρο πορτοκαλί». */
.hours .h.peak{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
.hours .hl{position:absolute;top:48px;left:0;right:0;
  font-size:12px;color:var(--muted);text-align:center}

/* Alerts */
.alert{display:flex;gap:14px;padding:14px 16px;border-radius:12px;margin-top:10px;border:1px solid;align-items:flex-start}
.alert.critical{background:rgba(255,90,95,.08);border-color:rgba(255,90,95,.35)}
.alert.major{background:rgba(255,159,67,.08);border-color:rgba(255,159,67,.35)}
.alert.minor{background:rgba(255,211,42,.08);border-color:rgba(255,211,42,.3)}
/* «warning» = όριο της γνώσης μας, όχι βλάβη του πάρκου. Γι' αυτό μπλε, όχι κόκκινο. */
.alert.warning{background:rgba(74,158,255,.07);border-color:rgba(74,158,255,.3)}
.alert .sev{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:999px;flex-shrink:0}
.alert.critical .sev{background:var(--red);color:#fff}
.alert.major .sev{background:var(--orange);color:var(--on-accent)}
.alert.minor .sev{background:var(--yellow);color:var(--on-accent)}
.alert.warning .sev{background:var(--blue);color:var(--on-accent)}
.alert.warning .cost b{color:var(--muted);font-weight:700}
.alert .body{flex:1;min-width:0}
.alert .body b{display:block;margin-bottom:3px;font-size:15px}
.alert .body p{font-size:13px;color:var(--muted)}
.alert .cost{text-align:right;flex-shrink:0}
.alert .cost b{font-size:19px;font-weight:800;color:var(--red)}
.alert .cost small{display:block;font-size:12px;color:var(--muted)}

/* ── Εκκαθαριστικό ΔΑΠΕΕΠ ──────────────────────────────────────────────────
   ΓΡΑΨΙΜΟ ΜΕ ΤΟ ΧΕΡΙ, ΣΧΕΔΙΑΣΜΕΝΟ ΓΙΑ ΚΑΠΟΙΟΝ ΠΟΥ ΔΕΝ ΤΑ ΠΑΕΙ ΚΑΛΑ ΜΕ ΟΘΟΝΕΣ:
   μεγάλα πεδία (48px ύψος, 17px γράμματα — όχι 15), ρητή ετικέτα πάνω από κάθε
   πεδίο σε κάθε γραμμή στο κινητό, και σύμβολα €/kWh μέσα στο πεδίο ώστε να μη
   χρειάζεται να θυμάται τι πάει πού. */
.dap-rows{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dap-row{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:8px;align-items:end}
.dap-row .lab{display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.dap-row input,.dap-row select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;
  font-size:17px;font-family:inherit;background:var(--bg);color:var(--txt);min-height:48px}
.dap-row input:focus,.dap-row select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.dap-row .rm{display:flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;min-width:48px;min-height:48px;font-size:20px;cursor:pointer;font-family:inherit}
.dap-row .rm:hover{color:var(--red);border-color:var(--red)}
/* Σε desktop φτάνει το σύμβολο· σε κινητό η γραμμή γίνεται πλατιά και ένα σκέτο
   ✕ μέσα σε άδειο πλαίσιο μοιάζει με πεδίο συμπλήρωσης, όχι με κουμπί. */
.dap-row .rm em{display:none;font-style:normal;font-size:15px;font-weight:700}

/* Απορριφθείσα ημέρα: μένει ορατή αλλά ξεθωριασμένη — «το είδα, το έβγαλα». */
.dayrow.rejected{opacity:.6}
.dayrow.rejected .amt{text-decoration:line-through}

/* Η επιβεβαίωση του τι καταλάβαμε — πιάνει ολόκληρο το πλάτος κάτω από τη γραμμή. */
.d-echo{grid-column:1/-1;font-size:13px;color:var(--muted);padding:2px 2px 0;min-height:0}
.d-echo b{color:var(--txt);font-weight:700}
.d-echo.odd{color:var(--orange)}
.d-echo .bad{color:var(--red);font-weight:700}

.dap-check{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dap-check input{width:22px;height:22px;margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.dap-check span{font-size:14px}
.dap-check small{display:block;font-size:13px;color:var(--muted);margin-top:3px;font-weight:400}

.dap-file{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.dap-file summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.dap-file summary:hover{color:var(--txt)}

/* Το αποτέλεσμα: μία μεγάλη ετυμηγορία, μετά οι λεπτομέρειες. */
.dap-verdict{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 18px;
  border-radius:12px;border:1px solid}
.dap-verdict.good{background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.35)}
.dap-verdict.warn{background:rgba(255,159,67,.08);border-color:rgba(255,159,67,.35)}
.dap-verdict.bad{background:rgba(255,90,95,.08);border-color:rgba(255,90,95,.35)}
.dap-verdict .ic{font-size:30px;line-height:1;flex-shrink:0}
.dap-verdict b{display:block;font-size:17px;margin-bottom:4px}
.dap-verdict p{font-size:14px;color:var(--muted)}
.dap-verdict .btn-set{margin:12px 0 0;font-size:14px;padding:11px 18px;min-height:44px}

.dap-months{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.dap-m{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:10px;align-items:center;
  padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.dap-m .mn{font-weight:700;font-size:14px}
.dap-m .col{text-align:right}
.dap-m .col span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dap-m .col b{font-size:15px;font-weight:700}
.dap-m.ok{border-left:3px solid var(--green)}
.dap-m.unpaid{border-left:3px solid var(--yellow)}
.dap-m.missing-data{border-left:3px solid var(--orange)}
.dap-m.partial,.dap-m.no-inverter{border-left:3px solid var(--line)}
.dap-note{grid-column:1/-1;font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:2px}

@media(max-width:700px){
  /* Σε κινητό η γραμμή γίνεται κάθετη — τρία πεδία δίπλα-δίπλα σε 360px είναι
     3 εκατοστά το καθένα και δεν πατιούνται. */
  .dap-row{grid-template-columns:1fr 1fr;gap:10px}
  .dap-row .mfield{grid-column:1/-1}
  .dap-row .rm{grid-column:1/-1;width:100%}
  .dap-row .rm em{display:inline}
  /* Σε κινητό οι τρεις αριθμοί μπαίνουν σε στήλη με ετικέτα αριστερά και τιμή
     δεξιά — διαβάζεται σαν λογαριασμός, που είναι ακριβώς αυτό που είναι. */
  .dap-m{grid-template-columns:1fr;gap:6px}
  .dap-m .mn{margin-bottom:2px}
  .dap-m .col{display:flex;justify-content:space-between;align-items:baseline;
    text-align:left;border-top:1px solid var(--line);padding-top:6px}
  .dap-m .col span{margin:0}
}

/* Table */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.tag.ok{background:rgba(63,185,80,.15);color:var(--green)}
.tag.bad{background:rgba(255,90,95,.15);color:var(--red)}
.tag.warn{background:rgba(255,159,67,.15);color:var(--orange)}

/* O&M claim box */
.claim{background:linear-gradient(135deg,rgba(255,90,95,.12),rgba(255,159,67,.08));
  border:1px solid rgba(255,90,95,.3);border-radius:14px;padding:18px}
.claim .amt{font-size:34px;font-weight:800;color:var(--red)}

.hint{font-size:13px;color:var(--muted);margin-top:14px;padding:12px 14px;background:var(--panel2);border-radius:10px;border-left:3px solid var(--accent)}
.view{display:none}.view.on{display:block}
.foot{color:var(--muted);font-size:12.5px;text-align:center;margin:30px 0 16px;line-height:1.7}

@media(max-width:860px){
  .c2,.c3,.c4,.c6,.c8{grid-column:span 12}
  .chips{grid-template-columns:repeat(2,1fr)}
  .pcard{flex-wrap:wrap}.pcard .money{text-align:left;width:100%}
  .wf{height:200px}.wf .lbl{font-size:12px}
  .card{overflow-x:hidden}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---- Ρυθμίσεις πάρκου ---- */
.btn-set{margin-left:auto;background:var(--accent);color:var(--on-accent);border:none;padding:12px 20px;border-radius:999px;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;min-height:46px}
.btn-set:hover{background:var(--accent2)}
header.top .badge{margin-left:10px}
.modal{display:none;position:fixed;inset:0;background:var(--overlay);z-index:60;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;max-width:460px;width:100%;max-height:90vh;overflow:auto}
.modal-box h3{font-size:20px;margin-bottom:4px;color:var(--txt);text-transform:none;letter-spacing:0}
.field{margin:14px 0}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.field input,.field select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;min-height:48px;
  font-size:15px;font-family:inherit;background:var(--bg);color:var(--txt)}
.fhint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt);padding:12px 20px;min-height:46px;
  border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}

/* Στενές οθόνες: η κεφαλίδα να μη στριμώχνεται */
@media(max-width:560px){
  header.top{flex-wrap:wrap;gap:10px}
  header.top .brand{font-size:17px;flex:1;min-width:0}
  header.top .brand small{display:none}
  .btn-set{margin-left:auto;padding:8px 12px;font-size:13px}
  header.top .badge{margin-left:0;order:3;width:100%;text-align:center}
}

/* ---- Ρύπανση ---- */
.soil-chart{display:flex;align-items:flex-end;gap:2px;height:150px;margin-top:12px}
.soil-chart .sc{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.soil-chart .sbar{width:100%;background:linear-gradient(180deg,var(--accent2),var(--accent));border-radius:2px 2px 0 0;min-height:1px}
.soil-chart .sc.rain .sbar{background:var(--blue)}
.soil-chart .sc.dust::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);border-radius:2px}
.advice{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:12px;border:1px solid}
.advice.yes{background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.35)}
.advice.no{background:rgba(138,151,166,.08);border-color:var(--line)}
.advice .big{font-size:30px;font-weight:800;flex-shrink:0}

/* ---- Οδηγίες ξεκινήματος (3 βήματα) ---- */
.btn-help{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:15px;font-weight:800;cursor:pointer;
  font-family:inherit;flex-shrink:0;line-height:1}
.btn-help:hover{border-color:var(--accent);color:var(--accent2)}
.btn-help.hidden{display:none}

.onb{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:14px;padding:20px 22px;margin-top:18px}
.onb.hidden{display:none}
.onb h3{font-size:17px;font-weight:800;color:var(--txt);margin-bottom:4px}
.onb-lead{font-size:13px;color:var(--muted);margin-bottom:16px;max-width:640px}
.onb-close{position:absolute;top:12px;right:14px;background:transparent;border:none;
  color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:8px;font-family:inherit}
.onb-close:hover{color:var(--txt);background:var(--panel2)}

.onb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.onb-step{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px}
.onb-step .n{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.onb-step b{display:block;font-size:15px;margin-bottom:5px;color:var(--txt)}
.onb-step p{font-size:13.5px;color:var(--muted);margin-bottom:12px;line-height:1.45}
.onb-btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:none;
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;text-decoration:none}
.onb-btn:hover{background:var(--accent2)}

@media(max-width:860px){ .onb-grid{grid-template-columns:1fr} }
@media(max-width:560px){ .onb{padding:16px 16px 18px} .onb-close{top:8px;right:8px} }

/* ---- Λογαριασμός χρήστη / demo mode ---- */
.user-box{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.user-box b{color:var(--txt);font-weight:600;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.user-box a{color:var(--muted);text-decoration:none;font-weight:700;border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;font-size:13px}
.user-box a:hover{color:var(--txt);border-color:var(--accent)}

.demo-banner{display:none;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3);
  border-radius:12px;padding:14px 18px;margin-top:16px;font-size:13.5px;color:var(--txt)}
.demo-banner.on{display:flex}
.demo-banner span{flex:1;min-width:240px}

.fleet-actions{display:flex;justify-content:flex-end;margin-bottom:12px}

.empty-state{display:none;text-align:center;background:var(--panel);border:1px dashed var(--line);
  border-radius:16px;padding:48px 24px}
.empty-state.on{display:block}
.empty-state .big{font-size:44px;margin-bottom:12px}
.empty-state b{display:block;font-size:18px;margin-bottom:8px}
.empty-state p{font-size:14px;color:var(--muted);max-width:420px;margin:0 auto 20px;line-height:1.55}

@media(max-width:560px){
  .user-box{order:4;width:100%;justify-content:space-between}
  .user-box b{max-width:none}
}
/* Τα δύο κουμπιά της κάρτας πάρκου. Στόχος αφής 40px — ο κανόνας των 44px
   αφορά τα κύρια κουμπιά· εδώ είναι δευτερεύοντα και δίπλα-δίπλα, οπότε
   κρατάμε απόσταση μεταξύ τους ώστε να μην πατηθεί λάθος η διαγραφή. */
/* ---- Οδηγός βήμα-βήμα («Τα δεδομένα μου») ---- */
.steps-card{border-color:rgba(59,130,246,.28)}
.step-row{display:flex;gap:16px;align-items:flex-start;margin:16px 0}
.step-n{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.step-row b{display:block;font-size:15.5px;color:var(--txt);margin-bottom:3px}
.step-row p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}

/* Λέγονταν «.brand» — ίδιο όνομα με την κλάση του λογότυπου στην κεφαλίδα.
   Επειδή αυτός ο κανόνας έρχεται δεύτερος, ο τίτλος «VoltGaia» κληρονομούσε
   περίγραμμα και στρογγυλεμένες γωνίες: έμοιαζε με χαλασμένο πεδίο εισαγωγής,
   χειρότερα στο φωτεινό θέμα. Εδώ «vendor» σημαίνει μάρκα inverter. */
.vendor{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--inset)}
/* Ο στόχος αφής είναι ολόκληρη η γραμμή, όχι το τριγωνάκι. */
.vendor summary{padding:14px 16px;min-height:48px;display:flex;align-items:center;
  cursor:pointer;font-weight:700;font-size:15px;color:var(--txt);list-style:none}
.vendor summary::-webkit-details-marker{display:none}
.vendor summary::before{content:'▸';margin-right:10px;color:var(--accent2);font-size:13px;
  transition:transform .15s}
.vendor[open] summary::before{transform:rotate(90deg)}
.vendor[open] summary{border-bottom:1px solid var(--line)}
.vendor ol{margin:12px 0 12px 34px;padding:0}
.vendor li{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:5px}
.vendor p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:10px 16px}
.vendor .tip{background:rgba(59,130,246,.09);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:11px 14px;margin:12px 16px 14px;color:var(--txt)}

/* Το summary του «έχω το εκκαθαριστικό σε αρχείο» ήταν 20px — κάτω από τον
   κανόνα των 44px. Είναι πτυσσόμενο που πατιέται με δάχτυλο, όπως τα .vendor. */
.dap-file summary{min-height:44px;display:flex;align-items:center;cursor:pointer}

/* Διακόπτης σεναρίου στην καρτέλα του δανείου. */
.curt-toggle{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.curt-toggle label{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 16px;min-height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--inset);font-size:14.5px;color:var(--muted)}
.curt-toggle label:has(input:checked){border-color:var(--accent);color:var(--txt);
  background:rgba(59,130,246,.10)}
.curt-toggle input{width:18px;height:18px;accent-color:var(--accent);margin:0;flex-shrink:0}
.curt-toggle small{color:var(--muted);font-weight:400}
@media(max-width:560px){ .curt-toggle label{width:100%} }

.pcard-tools{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.pcard-edit,.pcard-del{background:transparent;border:1px solid var(--line);color:var(--muted);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:14px;cursor:pointer;font-family:inherit;line-height:1}
.pcard-edit:hover{border-color:var(--accent);color:var(--accent2)}
/* Η διαγραφή γίνεται κόκκινη ΜΟΝΟ στο hover: κόκκινη μονίμως θα τραβούσε το
   μάτι σε μια ενέργεια που σπάνια θέλεις. */
.pcard-del:hover{border-color:var(--red);color:var(--red);background:rgba(255,90,95,.08)}

/* ---- Επεξηγήσεις όρων («?») ---- */
/* ΤΟ ΚΟΥΜΠΙ ΠΟΥ ΧΡΕΙΑΖΕΤΑΙ ΠΕΡΙΣΣΟΤΕΡΟ ΟΠΟΙΟΣ ΔΕΝ ΞΕΡΕΙ ΟΡΟΛΟΓΙΑ.
   Ήταν 17×17px — μικρότερο από το νύχι του δείκτη και σε χρώμα που σχεδόν
   δεν φαινόταν. Τώρα: 26px ορατό, 44px επιφάνεια αφής (μέσω ::after), και
   στο χρώμα του brand ώστε να διαβάζεται ως «πάτησέ με». */
.help-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);
  background:rgba(59,130,246,.1);color:var(--accent2);font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;margin-left:8px;padding:0;line-height:1;
  vertical-align:middle;flex-shrink:0}
.help-dot::after{content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.help-dot:hover{background:var(--accent);color:var(--on-accent)}
.help-body{font-size:14px;line-height:1.65;color:var(--muted);max-height:60vh;overflow-y:auto;padding-right:4px}
.help-body p{margin-bottom:12px}
.help-body b{color:var(--txt)}
.help-body h4{color:var(--accent2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  margin:18px 0 8px;font-weight:800}
.help-body ul{margin:0 0 12px 20px}
.help-body li{margin:5px 0}
.help-body .hint-inline{font-size:13px;background:var(--panel2);border-radius:8px;padding:10px 12px}
.help-body .help-note{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3);
  border-radius:10px;padding:14px;margin-top:16px;font-size:13.5px;color:var(--txt)}

/* ---- Πραγματικός χρόνος: φρεσκάδα, ανανέωση, ειδοποιήσεις ---- */
.freshness{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
/* ΚΑΤΑΣΤΑΣΕΙΣ ΦΡΕΣΚΑΔΑΣ.
   Το χρώμα δεν είναι διακόσμηση: είναι η μόνη ένδειξη ότι τα νούμερα που
   διαβάζει ο χρήστης μπορεί να είναι παλιά. Γι' αυτό το κόκκινο έχει και
   βάρος 700 — πρέπει να το δει κανείς χωρίς να το ψάχνει.
   Το `title` του στοιχείου δίνει την ανάλυση ανά πάρκο στο hover. */
.freshness.ok{color:var(--muted)}
.freshness.warn{color:var(--orange)}
.freshness.bad{color:var(--red);font-weight:700}
.freshness.muted{color:var(--muted);opacity:.75}
/* Η κουκκίδα «ζωντανά» μπαίνει ΜΟΝΟ στην κατάσταση ok. Ένας παλμός δίπλα σε
   προειδοποίηση θα έλεγε «όλα ρέουν» ενώ λέμε το αντίθετο. */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(63,185,80,.2);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn-refresh{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;font-family:inherit;
  flex-shrink:0;line-height:1}
.btn-refresh:hover{border-color:var(--accent);color:var(--accent2)}
.btn-refresh.spinning{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

.notify-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.notify-bar div{flex:1;min-width:240px}
.notify-bar b{display:block;font-size:15px;margin-bottom:4px}
.notify-bar p{font-size:13.5px;color:var(--muted);line-height:1.5}
.btn-notify{background:var(--accent);color:var(--on-accent);border:none;padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-notify:hover{background:var(--accent2)}
.btn-notify.on{background:rgba(63,185,80,.15);color:var(--green);border:1px solid rgba(63,185,80,.4)}

.toasts{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;
  gap:10px;max-width:360px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;
  box-shadow:0 12px 32px var(--shadow);animation:slideIn .25s ease-out}
.toast.critical{border-left-color:var(--red)}
.toast b{flex:1;font-size:13.5px;font-weight:700;line-height:1.35}
.toast span{font-size:13px;font-weight:800;color:var(--red);white-space:nowrap}
.toast-x{background:transparent;border:none;color:var(--muted);font-size:14px;cursor:pointer;
  padding:2px 4px;font-family:inherit}
.toast.leaving{opacity:0;transform:translateX(20px);transition:all .6s ease-in}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:560px){
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .freshness{order:5;width:100%;justify-content:center;margin-top:4px}
}

.link-btn{background:none;border:none;color:var(--accent2);font-family:inherit;font-size:inherit;
  padding:0;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--accent)}

/* Πρόσκληση για σχόλια. Ήταν σύνδεσμος μέσα στο υποσέλιδο και δεν τον έβλεπε
   κανείς. Στη δοκιμαστική φάση το σχόλιο του χρήστη είναι το προϊόν, οπότε
   παίρνει δικό του πλαίσιο με το χρώμα της μάρκας. */
.feedback-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:22px 0 8px;padding:18px 22px;border-radius:16px;
  background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(59,130,246,.03));
  border:1px solid rgba(59,130,246,.32)}
.feedback-cta > div{flex:1;min-width:220px}
.feedback-cta b{display:block;font-size:16px;color:var(--txt);margin-bottom:3px}
.feedback-cta span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.feedback-cta .btn-set{margin-left:0;flex-shrink:0}
@media(max-width:560px){
  .feedback-cta{padding:16px;gap:14px}
  .feedback-cta .btn-set{width:100%}
}

.prepay-block{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.prepay-block > b{font-size:14.5px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.pp-grid div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pp-grid b{display:block;font-size:21px;font-weight:800;line-height:1.15}
.pp-grid span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pp-grid .good b{color:var(--green)}
.pp-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pp-compare > div{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pp-compare .win{border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.06)}
.pp-compare h4{font-size:13px;margin-bottom:8px;color:var(--txt)}
.pp-compare .n{font-size:19px;font-weight:800;color:var(--green)}
.pp-compare p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:6px}
@media(max-width:560px){.pp-compare{grid-template-columns:1fr}}

/* ---- ΣΗΜΕΡΑ: οι τρεις ερωτήσεις ---- */
.q3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q3 .q{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.q3 .q .lbl{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.q3 .q .big{font-size:32px;font-weight:800;line-height:1.15;margin:8px 0 4px}
.q3 .q .sub2{font-size:13px;color:var(--muted);line-height:1.5}
.q3 .q.earn .big{color:var(--green)}
.q3 .q.lost .big{color:var(--red)}
.q3 .q.act .big{font-size:19px;color:var(--accent2);line-height:1.3}
@media(max-width:860px){.q3{grid-template-columns:1fr}}

.act-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.act-row:first-child{border-top:none}
.act-row .money{flex:0 0 118px;text-align:right}
.act-row .money b{display:block;font-size:19px;font-weight:800;color:var(--red)}
.act-row .money.gain b{color:var(--green)}
.act-row .money.cost b{color:var(--orange)}
.act-row .money small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.act-row .body{flex:1;min-width:0}
.act-row .body b{display:block;font-size:15px;margin-bottom:4px;line-height:1.35}
.act-row .body p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.act-row .go{background:transparent;border:1px solid var(--line);color:var(--accent2);padding:9px 14px;
  border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.act-row .go:hover{border-color:var(--accent);background:rgba(59,130,246,.08)}
@media(max-width:560px){
  .act-row{flex-wrap:wrap;gap:10px}
  .act-row .money{flex:0 0 auto;text-align:left;order:2}
  .act-row .body{flex:1 1 100%;order:1}
  .act-row .go{order:3;margin-left:auto;min-height:44px}
}

/* ---- Τα δικά σου δεδομένα (πραγματικές μετρήσεις) ---- */
#srcTag{margin:12px 0 -4px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
  padding:9px 14px;border-radius:10px;display:none}
#srcTag.on{display:block}
#srcTag.real{background:rgba(63,185,80,.10);color:var(--green);border:1px solid rgba(63,185,80,.30)}
#srcTag.model{background:rgba(138,151,166,.08);color:var(--muted);border:1px solid var(--line)}
#srcTag b{font-weight:800}
/* Το `margin-left:auto` του .btn-set σπρώχνει το κύριο κουμπί δεξιά σε desktop,
   αλλά όταν η σειρά τυλίγεται σε κινητό το έστελνε ΚΑΤΩ από το «Διαγραφή».
   Η καταστροφική ενέργεια δεν μπαίνει ποτέ πρώτη — και δεν είναι και πλήρους
   πλάτους, ώστε να μην πατηθεί κατά λάθος. */
.real-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px;align-items:center}
.real-actions .btn-set{order:-1;margin-left:0}
.src-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;letter-spacing:.3px;vertical-align:middle;margin-left:8px}
.src-tag.real{background:rgba(63,185,80,.14);color:var(--green);border:1px solid rgba(63,185,80,.35)}
.src-tag.model{background:rgba(138,151,166,.12);color:var(--muted);border:1px solid var(--line)}
.real-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.real-stat div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.real-stat b{display:block;font-size:20px;font-weight:800}
.real-stat span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* Ημερήσιο γράφημα: γκρι ράβδος = αναμενόμενη, χρωματιστή = πραγματική */
.realbars{display:flex;align-items:flex-end;gap:2px;height:170px;margin-top:12px;
  overflow-x:auto;padding-bottom:4px}
.realbars .rb{flex:1 0 6px;min-width:5px;height:100%;display:flex;align-items:flex-end;
  position:relative;background:linear-gradient(180deg,transparent 0,transparent 100%)}
.realbars .exp{position:absolute;left:0;right:0;bottom:0;background:var(--line);border-radius:2px 2px 0 0}
.realbars .act{position:relative;width:100%;border-radius:2px 2px 0 0;z-index:1}
.realbars .act.ok{background:var(--green)}
.realbars .act.curtailment{background:var(--orange)}
.realbars .act.fault{background:var(--red)}
.realbars .act.soiling{background:var(--yellow)}
.realbars .act.unknown{background:var(--blue)}

.dayrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.dayrow .d{font-weight:700;font-size:13.5px;min-width:92px}
.dayrow .why{flex:1;min-width:220px;font-size:13px;color:var(--muted);line-height:1.5}
.dayrow .amt{font-weight:800;color:var(--red);font-size:14px;white-space:nowrap}
.dayrow .yn{display:flex;gap:6px}
.dayrow .yn button{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.dayrow .yn button:hover{border-color:var(--accent);color:var(--txt)}
.dayrow .yn button.on{background:rgba(63,185,80,.15);border-color:rgba(63,185,80,.4);color:var(--green)}
.dayrow .yn button.off{background:rgba(255,90,95,.12);border-color:rgba(255,90,95,.4);color:var(--red)}
.conf{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.conf.high{background:rgba(63,185,80,.15);color:var(--green)}
.conf.medium{background:rgba(59,130,246,.15);color:var(--accent2)}
.conf.low{background:rgba(138,151,166,.15);color:var(--muted)}

/* Modal εισαγωγής */
.imp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px}
#impTable{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
#impTable th{background:var(--panel2);color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.3px;padding:7px 9px;text-align:left;font-weight:700}
#impTable td{padding:6px 9px;border-top:1px solid var(--line);color:var(--txt)}
#impTable .picked{color:var(--accent2);font-weight:700}
.imp-bar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  overflow:hidden;margin:14px 0 8px}
.imp-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}

/* ═══════════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — τελευταίο μπλοκ, υπερισχύει των προηγούμενων.

   Ο πελάτης δεν κάθεται σε γραφείο. Είναι στο πάρκο, στο αγροτικό, με το
   κινητό στο ένα χέρι. Η κεφαλίδα δεν επιτρέπεται να τρώει μισή οθόνη,
   και κάθε κουμπί πρέπει να πατιέται με αντίχειρα (≥44px).
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:560px){

  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .wrap{padding:0 14px}

  /* ---- Κεφαλίδα: 2 σειρές, όχι 5 ---- */
  header.top{flex-wrap:wrap;gap:8px 8px;padding:12px 0 10px}
  header.top img{width:32px;height:32px;order:1}
  header.top .brand{font-size:16px;line-height:1.2;flex:1;min-width:0;order:1}
  header.top .brand small{display:none}
  header.top .badge{order:1;margin-left:auto;width:auto;flex:0 0 auto;
    font-size:12px;padding:4px 9px;letter-spacing:0}
  /* Σπάει τη γραμμή μετά το λογότυπο+badge, ώστε οι ενέργειες να πέσουν
     ΟΛΕΣ μαζί στη δεύτερη σειρά αντί να σκορπίζονται σε τέσσερις. */
  header.top::after{content:"";flex-basis:100%;height:0;order:1}

  /* Δεύτερη σειρά: οι ενέργειες, όλες σε ύψος δαχτύλου */
  .btn-help,.btn-refresh{order:2;width:44px;height:44px;flex:0 0 44px;font-size:16px}
  .btn-set{order:2;margin-left:0;flex:1 1 auto;min-height:44px;padding:0 14px;
    font-size:13.5px;display:inline-flex;align-items:center;justify-content:center}
  /* Τρίτη σειρά: «πότε ενημερώθηκε» αριστερά, λογαριασμός δεξιά */
  .freshness{order:3;flex:1 1 auto;width:auto;justify-content:flex-start;
    font-size:12px;margin-top:0}
  .user-box{order:3;width:auto;flex:0 0 auto;justify-content:flex-end;font-size:12.5px;margin-top:0}
  .user-box b{max-width:150px}
  .user-box a{padding:11px 14px;min-height:44px;display:inline-flex;align-items:center}

  /* ---- Καρτέλες: να φαίνεται ότι κυλάνε ---- */
  nav.tabs{padding-top:12px;gap:2px;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.tabs button{padding:12px 13px;font-size:13.5px;min-height:44px}

  /* ---- Πλακίδια & κάρτες ---- */
  .chips{gap:8px;margin:14px 0}
  .chip{padding:10px 8px;min-height:44px}
  .chip b{font-size:21px}
  .chip span{font-size:12px}

  .pcard{padding:14px;gap:12px}
  .pcard .thumb{width:52px;height:52px;font-size:22px}
  .pcard .nm{font-size:15px}
  .pcard .money{margin-top:6px}

  .card{padding:14px}
  .kpi{font-size:27px}
  .kpi.sm{font-size:22px}

  /* ---- Ενέργειες πλάτους οθόνης (ο αντίχειρας φτάνει παντού) ---- */
  /* Τα κουμπιά ΜΕΣΑ σε κάρτα («Υπολόγισε») πιάνουν όλο το πλάτος — ο αντίχειρας
     δεν ψάχνει στόχο 90 pixel στη μέση της οθόνης. */
  .card .btn-set{width:100%;flex:none;margin-left:0;margin-top:12px}
  .fleet-actions{justify-content:stretch}
  .fleet-actions .btn-set{width:100%;flex:1 1 100%}
  .btn-notify{width:100%;min-height:46px}
  .notify-bar{gap:12px}
  .demo-banner{gap:10px}
  .demo-banner .onb-btn{width:100%;text-align:center;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  /* ---- Οδηγίες ---- */
  .onb h3{font-size:16px}
  .onb-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .onb-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}

  /* ---- Παράθυρα: φύλλο από κάτω, όπως το συνηθίζει στο κινητό ---- */
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding:22px 18px 26px}
  .modal-actions{flex-wrap:wrap;gap:8px}
  .modal-actions button{flex:1 1 45%;min-height:46px}
  .row{flex-direction:column;gap:0}
  /* 16px = το iOS ΔΕΝ κάνει ζουμ όταν πατάς το πεδίο. Κάτω από 16 κάνει. */
  .field input,.field select{font-size:16px;min-height:46px}

  /* ---- Γραφήματα ----
     Ο καταρράκτης είναι ΤΟ γράφημα του προϊόντος. Αν χρειάζεται πλάγιο σκρολ,
     ο πελάτης βλέπει 3 από τις 6 στήλες και χάνει όλο το νόημα. Χωράνε όλες. */
  /* Εδώ έγραφε «.wf-scroll{overflow-x:visible}». ΔΕΝ ίσχυσε ποτέ: το
     overflow-y:hidden αναγκάζει τον browser να κάνει το visible → auto
     στον άλλο άξονα. Η υπόσχεση «κανένα πλάγιο σκρολ» ισχύει τώρα επειδή
     το περιεχόμενο ΧΩΡΑΕΙ, όχι επειδή το απαγορεύει κανόνας. */
  .wf{height:190px;min-width:0;gap:3px}
  .wf .val{font-size:12px}
  .wf .lbl{font-size:12px;min-height:46px;margin-top:6px}
  .bars{height:100px}
  .soil-chart{height:120px}
  .legend,.wf-legend{font-size:12px;gap:8px 12px}
  .help-dot{width:22px;height:22px}
}

/* Πολύ στενές συσκευές (iPhone SE, 320px) */
@media(max-width:360px){
  header.top .brand{font-size:15px}
  .chips{grid-template-columns:1fr 1fr}
  .kpi{font-size:24px}
  nav.tabs button{padding:12px 10px;font-size:13px}
}

/* ---- Αυτόματη ενημέρωση (φόρμα πάρκου) ----
   Ξεχωρίζει οπτικά από τα υπόλοιπα πεδία γιατί είναι άλλης φύσης: τα άλλα
   περιγράφουν ΤΙ ΕΙΝΑΙ το πάρκο, αυτό ρυθμίζει ΠΩΣ ΕΡΧΟΝΤΑΙ τα δεδομένα. */
.auto-feed{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 14px 4px;margin:6px 0 14px;background:var(--panel2)}
.copyline{display:flex;gap:8px;align-items:center}
.copyline code{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:9px 11px;font-size:13.5px;overflow-x:auto;white-space:nowrap}
.copyline button{flex-shrink:0;min-height:44px}
.feed-state{font-size:13px;margin:2px 0 12px;min-height:18px}
.feed-state.on{color:var(--green)}
.feed-state.off{color:var(--muted)}
.feed-state.stale{color:var(--orange)}

/* ---- Καρτέλες στο κινητό: επιλογέας αντί για οριζόντια κύλιση ----
   Βλ. σχόλιο στο parks.html. Το κατώφλι είναι 700px γιατί εκεί αρχίζουν να
   μην χωράνε οι εννιά ετικέτες χωρίς κρυμμένο περιεχόμενο. */
.tabs-select{display:none}
@media(max-width:700px){
  nav.tabs{display:none}
  .tabs-select{
    display:block;width:100%;margin:12px 0 0;
    background:var(--panel);color:var(--txt);
    border:1px solid var(--line);border-radius:10px;
    padding:13px 14px;font-size:16px;font-weight:600;font-family:inherit;
    min-height:48px;
    /* ΓΙΑΤΙ 16px ΚΑΙ ΟΧΙ ΜΙΚΡΟΤΕΡΟ: κάτω από 16px το Safari στο iPhone κάνει
       ζουμ μόλις ακουμπήσεις το πεδίο, και μετά η σελίδα μένει μεγεθυμένη. */
    position:sticky;top:0;z-index:30;
    -webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                     linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  }
}

/* ── Έντονα μέσα σε κείμενο μένουν μέσα στο κείμενο ────────────────────────
   Οι κανόνες πιο πάνω (.step-row b, .notify-bar b, .alert .body b, κ.λπ.)
   γράφτηκαν για τον ΤΙΤΛΟ κάθε μπλοκ, που όντως θέλει δική του γραμμή. Όμως
   πιάνουν και κάθε <b> μέσα στην παράγραφο: το «Ψάχνεις κουμπί που λέει
   Export, Εξαγωγή ή Λήψη» έσπαγε σε πέντε γραμμές και διαβαζόταν σαν λίστα.
   Μία έμφαση μέσα σε πρόταση δεν είναι επικεφαλίδα. */
.step-row p b, .step-row li b,
.notify-bar p b, .notify-bar li b,
.alert .body p b, .alert .body li b,
.act-row .body p b, .act-row .body li b,
.chip p b, .dap-verdict p b, .onb-step p b, .empty-state p b,
.feedback-cta p b, .pp-grid p b, .real-stat p b{
  display:inline; font-size:inherit; margin:0; line-height:inherit;
}