/* ─── EPAL.CSS ─── Μόνο νέα στοιχεία του ΕΠΑΛ υπολογιστή.
   Τα υπόλοιπα (calc-layout, calc-row, calc-group, legend-tag, calc-score-box …)
   κληρονομούνται από τα υπάρχοντα calc styles — ΔΕΝ τα τροποποιούμε. */

.epal-select {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.epal-select:focus { border-color: var(--accent, #ea580c); }
.epal-select:disabled { opacity: 0.55; cursor: not-allowed; }

#epal-grades-inputs.grades-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#epal-grades-inputs .grade-field { display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 480px) { #epal-grades-inputs.grades-grid { grid-template-columns: 1fr; } }

/* ένδειξη «χρειάζεται ειδικό μάθημα» */
.epal-flag {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent, #ea580c);
  background: var(--accent-soft, #fff7ed);
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ── Mobile collapsible φίλτρα ΕΠΑΛ (/sxoles?epal=1) ──────────────────────────
 * Ίδιο pattern με τα ΓΕΛ φίλτρα: το κουμπί .browse-filters-toggle (class-based,
 * styling από core.css) εμφανίζεται <900px· εδώ μόνο οι κανόνες show/hide του
 * δικού μας body (#epal-filters-body). Δεν αγγίζει ΓΕΛ. */
#epal-filters-body { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) {
  #epal-filters-body { display: none; margin-top: 0; }
  #epal-filters-body.open { display: flex; margin-top: 16px; }
}

/* ── Mobile collapsible input panel (/ypologismos-morion-epal/) ────────────── */
#epal-search { min-width: 0; box-sizing: border-box; }
#epal-city   { min-width: 0; box-sizing: border-box; }

@media (max-width: 900px) {
  #epal-calc-filters-body { display: none; margin-top: 0; }
  #epal-calc-filters-body.open { display: block; margin-top: 16px; }
}

@media (max-width: 640px) {
  #view-epal-calc .container { padding-left: 14px; padding-right: 14px; }
  #view-epal-calc .calc-results-head { flex-direction: column; align-items: stretch; }
  #view-epal-calc .calc-results-head > div { width: 100%; }
  #epal-search { width: 100% !important; flex: 1 1 0; }
  #epal-city   { flex: 1 1 120px; width: 100% !important; }
}