/* ═══════════════════════════════════════════════════════════
   app.css — κοινό stylesheet για index.php, result.php και το
   standalone HTML export (STANDALONE_RUNTIME_JS / buildStandaloneHtml).

   Σήμερα το #1e3a5f είναι γραμμένο κυριολεκτικά και στα τρία
   σημεία. Μετά από αυτό, αλλάζει σε ένα.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* brand */
  --navy-900:#14293f;
  --navy-700:#1e3a5f;   /* το υπάρχον brand navy, αμετάβλητο */
  --navy-600:#2a5081;
  --navy-50:#eaf0f7;

  /* επιφάνειες */
  --canvas:#eef1f5;
  --surface:#ffffff;
  --surface-alt:#f5f7fa;
  --line:#d8dfe8;
  --line-soft:#e6ebf1;
  --line-faint:#f0f3f7;

  /* κείμενο */
  --text:#10202f;
  --text-muted:#4d6070;

  /* σημασιολογικά */
  --ok:#1b6b33;     --ok-bg:#e7f3ea;     --ok-text:#145a2a;
  --warn:#8a5a00;   --warn-bg:#fdf8ec;   --warn-line:#e3d5b0;  --warn-dot:#c98a00;
  --danger:#b3261e; --danger-bg:#fdeeee; --danger-text:#8f1f19;
  --focus:#2f6fd0;

  /* χρώματα δεδομένων — ΧΑΡΤΟΓΡΑΦΙΚΗ ΣΗΜΑΣΙΑ, δεν αλλάζουν.
     Ίδιες τιμές με το υπάρχον COLORS object στη JS του index.php:
     άλλαξέ το ώστε να τις διαβάζει από εδώ, μην τις ξαναγράφεις. */
  --m-name:#2e7d32;
  --m-fuzzy:#f9a825;
  --m-geonames:#1565c0;
  --m-geo-fuzzy:#6a1b9a;
  --m-manual:#c62828;

  /* γεωμετρία */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:32px;
  --shadow-card:0 1px 2px rgba(16,32,47,.04);
  --shadow-float:0 1px 2px rgba(16,32,47,.05), 0 6px 18px rgba(16,32,47,.10);

  /* τυπογραφία */
  --font:"IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --font-num:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* ── 2. BASE ────────────────────────────────────────────── */
*{ box-sizing:border-box; }
body{
  font-family:var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* Το focus που λείπει σήμερα εντελώς από όλο το project. */
:where(button, select, input, a, [tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* Κάθε αριθμός σε mono: οι στήλες Πληθυσμός/Συντεταγμένες
   στοιχίζονται κάθετα, που σήμερα δεν γίνεται. */
.num, .coord, code{ font-family:var(--font-num); }
.num{ text-align:right; white-space:nowrap; }
.coord{ font-size:12px; color:var(--text-muted); text-align:right; white-space:nowrap; }
.muted{ color:var(--text-muted); }

/* ── 3. ΚΟΥΜΠΙΑ ─────────────────────────────────────────── */
/* Αντικαθιστά τα τρία ασύμβατα στυλ:
   #solveBtn, (#clearBtn|#openTabBtn|#exportExcelBtn), #cancelBtn */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:40px; padding:0 16px;
  border:0; border-radius:var(--r-md);
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease;
}
.btn--lg{ height:44px; font-size:14px; }
.btn--block{ width:100%; }

.btn--primary{ background:var(--navy-700); color:#fff; font-weight:600; }
.btn--primary:hover{ background:var(--navy-600); }
.btn--primary:disabled{ background:#c3ccd8; cursor:not-allowed; }

.btn--secondary{ background:var(--surface); border:1px solid #ccd5e0; color:var(--navy-700); }
.btn--secondary:hover{ border-color:#adbccd; background:var(--surface-alt); }

.btn--ghost{ background:transparent; color:var(--navy-700); }
.btn--ghost:hover{ background:var(--navy-50); }

.btn--danger{ background:var(--danger-bg); border:1px solid #e0a9a5; color:var(--danger); }
.btn--danger:hover{ background:#fbe2e0; }

.icon-btn{
  width:32px; height:32px; flex:0 0 auto;
  border-radius:var(--r-sm); border:1px solid #ccd5e0;
  background:transparent; color:var(--navy-700);
  display:grid; place-items:center; cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.icon-btn:hover{ border-color:#adbccd; background:var(--surface-alt); }
/* παραλλαγή πάνω σε σκούρα μπάρα */
.topbar .icon-btn{ border-color:rgba(255,255,255,.28); color:#fff; }
.topbar .icon-btn:hover{ background:rgba(255,255,255,.14); }

/* ── 4. ΠΕΔΙΑ ΦΟΡΜΑΣ ────────────────────────────────────── */
/* Αντικαθιστά τα border:none inputs/selects της navy μπάρας. */
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{ font-size:12px; font-weight:500; color:var(--text-muted); }
.field .hint{ font-size:11.5px; color:var(--text-muted); line-height:1.45; }
.field .err{ font-size:11.5px; color:var(--danger); }

.input, .select,
input[type=number].input, input[type=text].input{
  height:38px; width:100%; padding:0 10px;
  border:1px solid #ccd5e0; border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:inherit; font-size:13.5px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:hover, .select:hover{ border-color:#adbccd; }
.input:focus, .select:focus{
  outline:none; border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(47,111,208,.2);
}
.input--num{ font-family:var(--font-num); }
.input[aria-invalid="true"]{ border-color:var(--danger); }

.row-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.row-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }

/* ── 5. TOGGLES (επίπεδα χάρτη, γραμμές εξυπηρέτησης) ──── */
/* Αντικαθιστά τα γυμνά <label><input type=checkbox> της μπάρας
   και τα .toggle-row του result.php. */
.toggle{
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:0 11px;
  border:1px solid #ccd5e0; border-radius:var(--r-pill);
  background:var(--surface);
  font-size:12.5px; color:var(--text-muted);
  cursor:pointer; user-select:none;
  transition:border-color .12s ease, background .12s ease;
}
.toggle input{ accent-color:var(--navy-700); margin:0; }
.toggle:hover{ border-color:#adbccd; }
.toggle:has(input:checked){
  border-color:var(--navy-700); background:var(--navy-50);
  color:var(--navy-700); font-weight:500;
}
.toggle--aed input{ accent-color:var(--m-manual); }
.toggle--aed:has(input:checked){
  border-color:var(--m-manual); background:var(--danger-bg); color:var(--danger-text);
}

/* ── 6. PILLS / ΚΑΤΑΣΤΑΣΕΙΣ ─────────────────────────────── */
/* Αντικαθιστά το #backendStatus.online/.offline και το #jobBadge. */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 12px;
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; white-space:nowrap;
}
.pill .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.pill--ok{ background:var(--ok-bg); color:var(--ok-text); }
.pill--ok .dot{ background:var(--ok); }
.pill--bad{ background:var(--danger-bg); color:var(--danger-text); }
.pill--bad .dot{ background:var(--danger); }
.pill--run{ background:var(--warn-bg); color:#7a5200; }
.pill--run .dot{ background:var(--warn-dot); }
.pill--job{ background:var(--navy-50); color:var(--navy-700); font-family:var(--font-num); }
/* πάνω σε σκούρα μπάρα */
.topbar .pill--ok{ background:rgba(139,212,139,.16); color:#a7e0a7; }
.topbar .pill--ok .dot{ background:#6cc96c; }
.topbar .pill--bad{ background:rgba(242,139,130,.16); color:#f2b2ac; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600;
  background:var(--ok-bg); color:var(--ok-text);
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); }
.badge--warn .dot{ background:var(--warn-dot); }

/* ── 7. ΚΑΡΤΕΣ ──────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.card__head{
  padding:12px 16px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
}
.card__head h2{ margin:0; font-size:14px; font-weight:600; }
.card__head .right{ margin-left:auto; font-size:12px; color:var(--text-muted); }
.card--float{ box-shadow:var(--shadow-float); }

/* ── 8. KPI ─────────────────────────────────────────────── */
/* Αντικαθιστά τον πίνακα "Μετρικές" με raw keys στο result.php. */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin:0; }
.kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:15px 17px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-card);
}
.kpi dt{ font-size:11.5px; font-weight:500; color:var(--text-muted); }
.kpi dd{
  margin:0; font-family:var(--font-num); font-size:27px; font-weight:500;
  letter-spacing:-.02em; line-height:1.15;
}
.kpi dd span{ font-size:14px; color:var(--text-muted); font-family:var(--font); }
.kpi .sub{ font-size:11.5px; color:var(--text-muted); }
.kpi a{ font-size:11.5px; color:var(--navy-700); font-weight:500; text-decoration:none; }
.kpi a:hover{ text-decoration:underline; }

.meter{ height:4px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden; }
.meter i{ display:block; height:100%; background:var(--ok); border-radius:var(--r-pill); }

/* ── 9. ΠΙΝΑΚΕΣ ─────────────────────────────────────────── */
/* Αντικαθιστά το th{background:#1e3a5f;color:#fff} — τρεις στοιβαγμένοι
   navy πίνακες είναι πολύ βαρύ. Ανοιχτή κεφαλίδα, zebra rows. */
.table-scroll{ overflow:auto; }
.table-scroll--tall{ max-height:520px; }
.table{ width:100%; border-collapse:collapse; min-width:520px; }
.table thead th{ position:sticky; top:0; z-index:2; }
.table th{
  text-align:left; padding:10px 16px;
  font-size:12px; font-weight:600; color:var(--text-muted);
  background:var(--surface-alt); border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.table th.r{ text-align:right; }
.table th.sortable{ cursor:pointer; user-select:none; }
.table th.sortable:hover{ color:var(--navy-700); }
.table th .arr{ color:var(--navy-700); }
.table td{ padding:9px 16px; font-size:13px; border-bottom:1px solid var(--line-faint); }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:nth-child(even) td{ background:#fafbfd; }
.table tbody tr:hover td{ background:var(--navy-50); }
.table .nm{ font-weight:500; }

/* Λίστα ζευγών ετικέτα/τιμή — για τα "Στατιστικά επίλυσης",
   καλύτερη από πίνακα δύο στηλών. */
.stats{ padding:6px 16px 14px; margin:0; }
.stats > div{
  display:flex; align-items:baseline; gap:var(--s3);
  padding:9px 0; border-bottom:1px solid var(--line-faint); font-size:12.5px;
}
.stats > div:last-child{ border-bottom:0; }
.stats dt{ color:var(--text-muted); margin:0; }
.stats dd{
  margin:0 0 0 auto; font-family:var(--font-num); font-size:13px;
  color:var(--text); text-align:right;
}
.stats dd.plain{ font-family:var(--font); }
.stats dd.good{ font-family:var(--font); font-weight:600; color:var(--ok-text); }

/* ── 10. ΕΙΔΟΠΟΙΗΣΕΙΣ ───────────────────────────────────── */
/* Αντικαθιστά τα .results-panel .warn / .err και το .err-box. */
.notice{
  border-radius:var(--r-md); padding:10px 12px;
  display:flex; gap:9px; align-items:flex-start;
  font-size:12.5px; line-height:1.5;
}
.notice svg{ flex:0 0 auto; margin-top:1px; }
.notice--warn{ border:1px solid var(--warn-line); background:var(--warn-bg); color:#6b4600; }
.notice--err{ border:1px solid #e0a9a5; background:var(--danger-bg); color:var(--danger-text); }

/* ── 11. ΜΠΑΡΑ & PANEL (index.php) ──────────────────────── */
.topbar{
  flex:0 0 auto; height:56px;
  background:var(--navy-900); color:#fff;
  padding:0 18px; display:flex; align-items:center; gap:14px;
}
.topbar h1{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.topbar .sub{ font-size:11.5px; color:#a8bdd4; white-space:nowrap; }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:var(--s3); }
.topbar .counts{ display:flex; gap:18px; font-size:12px; color:#cdd9e6; white-space:nowrap; }
.topbar .counts b{ font-family:var(--font-num); font-size:13px; font-weight:500; color:#fff; }

.shell{ flex:1 1 auto; display:flex; min-height:0; }
.panel{
  width:344px; flex:0 0 auto;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
}
.panel__section{ padding:var(--s4) 18px 18px; display:flex; flex-direction:column; gap:var(--s3); }
.panel__section + .panel__section{ border-top:1px solid var(--line-soft); }
.panel__head{ display:flex; align-items:center; gap:var(--s2); }
.panel__head h2{ margin:0; font-size:13.5px; font-weight:600; }
.panel__head svg{ color:var(--text-muted); flex:0 0 auto; }
.panel__collapse{
  margin-left:auto; width:26px; height:26px; border:0; background:transparent;
  color:var(--text-muted); cursor:pointer; display:grid; place-items:center;
  border-radius:6px; transition:background .12s ease;
}
.panel__collapse:hover{ background:var(--surface-alt); }
.panel__collapse svg{ transition:transform .15s ease; }
.panel__collapse[aria-expanded="false"] svg{ transform:rotate(-90deg); }

/* ── 12. ΕΠΙΛΟΓΗ ΜΟΝΤΕΛΟΥ ───────────────────────────────── */
/* Αντικαθιστά το #modelSelect <select>. */
.model-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.model-tile{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 8px 11px;
  border:1px solid #ccd5e0; border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; color:#7d8fa1;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.model-tile:hover{ border-color:#adbccd; background:var(--surface-alt); }
.model-tile input{ position:absolute; opacity:0; pointer-events:none; }
.model-tile .nm{ font-size:12.5px; font-weight:500; color:var(--text); line-height:1; }
.model-tile:has(input:checked){
  border-color:var(--navy-700); border-width:1.5px; background:var(--navy-50);
  color:var(--navy-700); padding:11.5px 7.5px 10.5px;
}
.model-tile:has(input:checked) .nm{ color:var(--navy-700); font-weight:600; }
.model-tile:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }
.model-explain{
  margin:10px 0 0; font-size:12px; color:var(--text-muted); line-height:1.5;
  border-left:2px solid var(--navy-50); padding-left:10px; min-height:36px;
}
.model-explain b{ color:var(--text); font-weight:600; }

/* ── 13. ΠΡΟΟΔΟΣ JOB ────────────────────────────────────── */
/* Αντικαθιστά το "⏳ Υπολογισμός... 00:00" text badge. */
.job{
  border:1px solid var(--warn-line); background:var(--warn-bg);
  border-radius:var(--r-md); padding:11px 12px;
  display:flex; flex-direction:column; gap:var(--s2);
}
.job__head{ display:flex; align-items:center; gap:var(--s2); font-size:12.5px; color:#7a5200; }
.job__head b{ font-weight:600; }
.job__head time{ margin-left:auto; font-family:var(--font-num); }
.job__bar{ height:4px; border-radius:var(--r-pill); background:#eadfc4; overflow:hidden; }
.job__bar i{ display:block; height:100%; background:var(--warn-dot); border-radius:var(--r-pill); }
.job__foot{ display:flex; align-items:center; gap:var(--s2); font-size:11.5px; color:#7a5200; }

/* ── 14. ΧΑΡΤΗΣ: ΜΟΝΟ containers & εικονίδια ────────────── */
/* ΠΡΟΣΟΧΗ: μην αγγίξεις τίποτα άλλο σχετικό με Leaflet. */
.map-wrap{ flex:1 1 auto; position:relative; min-width:0; }
.map-wrap > .leaflet-container{ position:absolute; inset:0; }

.aed-icon{
  width:28px; height:28px; border-radius:50%; background:var(--navy-700);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.aed-icon-existing{
  width:26px; height:26px; border-radius:50%; background:var(--m-manual);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5);
  display:grid; place-items:center;
}

/* Υπόμνημα & κάρτα αποτελέσματος πάνω από τον χάρτη
   (Leaflet controls — αντικαθιστούν τα .legend / .results-panel) */
.legend{
  background:rgba(255,255,255,.97); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-float);
  padding:12px 14px; font-size:12px; line-height:1.8; min-width:170px;
}
.legend h3{ margin:0 0 7px; font-size:12px; font-weight:600; color:var(--text); }
.legend div{ display:flex; align-items:center; gap:var(--s2); color:var(--text-muted); }
.legend .swatch{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

.farthest-link{ color:var(--navy-700); text-decoration:underline; cursor:pointer; }
.farthest-link:hover{ color:var(--navy-600); }

/* ── 15. LAYOUT ΣΕΛΙΔΑΣ (result.php & export) ───────────── */
.wrap{ max-width:1216px; margin:0 auto; padding:0 24px; }
.pagehead{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:14px 0; position:sticky; top:0; z-index:700;
}
.pagehead .wrap{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.pagehead h1{ margin:0; font-size:20px; font-weight:600; letter-spacing:-.015em; }
.pagehead .meta{ margin:3px 0 0; font-size:12.5px; color:var(--text-muted); }
.pagehead .actions{ margin-left:auto; display:flex; gap:10px; }

.columns{ display:flex; gap:var(--s4); align-items:flex-start; }
.columns > .col-main{ flex:1 1 auto; min-width:0; }
.columns > .col-side{ width:340px; flex:0 0 auto; display:flex; flex-direction:column; gap:var(--s4); }

/* ── 16. RESPONSIVE ─────────────────────────────────────── */
/* Σήμερα το index.php δεν έχει ΚΑΜΙΑ media query. */
@media (max-width:980px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .columns{ flex-direction:column; }
  .columns > .col-side{ width:100%; }
}
@media (max-width:860px){
  .shell{ flex-direction:column-reverse; }
  .panel{ width:100%; max-height:52vh; border-right:0; border-top:1px solid var(--line); }
  .topbar .counts{ display:none; }
}
@media (max-width:560px){
  .wrap{ padding:0 14px; }
  .kpis{ grid-template-columns:1fr; }
  .pagehead h1{ font-size:17px; }
  .pagehead .actions{ width:100%; margin-left:0; }
  .table th, .table td{ padding:8px 12px; font-size:12px; }
}