:root{
  --border:#e5e7eb; --bg:#ffffff; --muted:#6b7280; --accent:#2563eb;
  --pill-h:38px; --radius:999px;
}

/* Βασικά */
*{ box-sizing:border-box; }
body{ margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#ccc; }
.wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; padding:12px; height:calc(100vh - 58px); }
#map{ width:100%; height:100%; min-height:420px; border:1px solid var(--border); border-radius:12px; }
.panel{ display:flex; flex-direction:column; gap:8px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px; }
.search{ padding:10px; border:1px solid var(--border); border-radius:8px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:8px; border-bottom:1px solid #f1f5f9; text-align:left; }
th{ cursor:pointer; user-select:none; }
tr.active{ background:#eff6ff; }
.badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); }
.ok{ background:#ecfdf5; border-color:#a7f3d0; }
.faulty{ background:#fff7ed; border-color:#fed7aa; }
.unknown{ background:#fee2e2; border-color:#fecaca; }
.muted{ color:var(--muted); }
.list-title{ font-weight:600; }
.emoji-pin{ font-size:24px; line-height:1; pointer-events:auto; }
.note{ max-width:320px; white-space:normal; word-wrap:break-word; }
th[data-sort="status"], td.status-cell{ width:1%; white-space:nowrap; }
header{ padding:12px 16px; background:#ffad33; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.logo{ height:90px; width:auto; }

/* Κουμπάκια γενικής χρήσης (π.χ. upload label στο header) */
.btn{ padding:6px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer; background:#f9fafb; }
.btn:hover{ background:#f3f4f6; }

/* ------------ Toolbar φίλτρων (ομοιόμορφα pill) ------------ */
.card.filters{ padding:12px; }

/* Grid 2 σειρών:
   - Σειρά 1: δύο διακόπτες
   - Σειρά 2: Πυροσβ. φωλιά, Δήμος, Επαναφορά
*/
.toolbar{ display:block; }
.toolbar-left{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, auto));
  grid-auto-rows:minmax(var(--pill-h), auto);
  column-gap:12px; row-gap:12px; align-items:center;
}
.row1{ grid-row:1; }
.row2{ grid-row:2; }

/* Ενιαίο pill για κουμπιά & selects */
.pill, .select-pill{
  height:var(--pill-h); padding:0 12px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; font:inherit; line-height:var(--pill-h); cursor:pointer;
}
.pill:hover, .select-pill:hover{ background:#f9fafb; }

/* Select με custom βελάκι */
.select-pill{
  appearance:none; min-width:220px; padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Toggle chips */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; height:var(--pill-h);
  border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; user-select:none; cursor:pointer;
}
.chip input{
  appearance:none; width:40px; height:22px; border-radius:999px;
  border:1px solid var(--border); background:#fff; position:relative;
}
.chip input::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:999px; background:#9ca3af; transition:all .2s;
}
.chip input:checked{ border-color:var(--accent); background:#e0e7ff; }
.chip input:checked::after{ left:22px; background:#2563eb; }

/* Focus ring */
.pill:focus-visible, .select-pill:focus-visible, .chip:has(input:focus-visible){
  outline:2px solid #c7d2fe; outline-offset:2px;
}

/* Responsive */
@media (max-width:900px){
  .wrap{ grid-template-columns:1fr; height:auto; }
  #map{ min-height:320px; }
  .note{ max-width:100%; }
  .toolbar-left{ grid-template-columns:1fr; }
  .select-pill, .pill{ width:100%; }
}
/* Reset: δεξιά, ανάμεσα στις 2 σειρές, πιο έντονο */
.pill-reset{
  grid-column: 3;           /* τρίτη στήλη του grid */
  grid-row: 1 / span 2;     /* πιάνει και τις 2 σειρές */
  align-self: center;        /* κάθετη στοίχιση στο κέντρο */
  justify-self: end;         /* πάει δεξιά στο κελί του */
  padding: 0 16px;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  background:#fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08); /* διακριτικό highlight */
}
.pill-reset:hover{ background:#eff6ff; }

/* Σε κινητό: κανονική ροή, full width */
@media (max-width:900px){
  .pill-reset{
    grid-column:auto; grid-row:auto;
    justify-self:stretch;
  }
}
/* Scrollable λίστα + floating “Πάνω” */
.list-scroll{
  position: relative;
  overflow: auto;
  max-height: 100%;
}

/* Το κουμπί μένει κάτω-δεξιά στο ορατό τμήμα της λίστας */
.to-top{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  opacity: 0;                 /* κρυφό αρχικά */
  pointer-events: none;
  transition: opacity .2s ease;
}
.to-top.show{ opacity: 1; pointer-events: auto; }
.to-top:hover{ filter: brightness(.95); }

/* Σε κινητό γίνεται full-width και λίγο πιο μεγάλο για ευκολία */
@media (max-width:900px){
  .to-top{ left: 14px; right: 14px; }
}