/* Közös építőkockák a vizuális tervdokumentáció szerint. Mindkét nézet (iroda, szerelő)
   ugyanezeket a class-okat használja; a tokenek (--erintes-min, betűméret) térnek el nézetenként. */

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--terkoz-2);
  min-height: var(--erintes-min);
  padding: 0 var(--terkoz-4);
  border-radius: var(--sarok-kozepes);
  border: 1px solid transparent;
  font-size: var(--betumeret-alap);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
  border-color: var(--szin-szegely);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.gomb:hover { filter: brightness(0.97); }
.gomb:active { filter: brightness(0.93); }
.gomb:disabled { opacity: 0.5; cursor: not-allowed; }
.gomb svg { width: 18px; height: 18px; flex-shrink: 0; }

.gomb--elsodleges { background: var(--szin-elsodleges); border-color: var(--szin-elsodleges); color: #fff; }
.gomb--sotet      { background: var(--szin-nav); border-color: var(--szin-nav); color: #fff; }
.gomb--siker      { background: var(--szin-siker); border-color: var(--szin-siker); color: #fff; }
.gomb--veszely    { background: var(--szin-veszely); border-color: var(--szin-veszely); color: #fff; }
.gomb--szoveges   { background: transparent; border-color: transparent; color: var(--szin-szoveg); }
.gomb--szoveges:hover { background: var(--szin-alap); filter: none; }
.gomb--tomb       { display: flex; width: 100%; }

.kartya {
  background: var(--szin-felulet);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok-nagy);
  box-shadow: var(--arnyek-kartya);
  padding: 20px;
}
.kartya h2 { font-size: var(--betumeret-lg); }

.mezo { margin-bottom: var(--terkoz-4); }
.mezo label {
  display: block;
  margin-bottom: var(--terkoz-1);
  font-weight: 600;
  font-size: var(--betumeret-sm);
  color: var(--szin-szoveg-halvany);
}
.mezo input,
.mezo select,
.mezo textarea {
  width: 100%;
  min-height: var(--erintes-min);
  padding: 0 var(--terkoz-3);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok-kicsi);
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
  font-size: var(--betumeret-alap);
  font-family: inherit;
}
.mezo textarea { padding: var(--terkoz-3); min-height: calc(var(--erintes-min) * 2); resize: vertical; }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus {
  outline: none;
  border-color: var(--szin-elsodleges);
  box-shadow: 0 0 0 3px var(--szin-elsodleges-vilagos);
}

/* Állapotcímke - szín + szöveg együtt jelzi az állapotot */
.allapot-jelzo {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--terkoz-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.allapot-jelzo[data-allapot="uj"]                    { background: #eef2f6; color: var(--szin-szoveg-halvany); }
.allapot-jelzo[data-allapot="szerelohoz_rendelve"]   { background: var(--szin-figyelmeztetes-vilagos); color: var(--szin-figyelmeztetes); }
.allapot-jelzo[data-allapot="folyamatban"]           { background: var(--szin-info-vilagos); color: var(--szin-info); }
.allapot-jelzo[data-allapot="befejezve"]             { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="idopont_egyeztetve"]    { background: var(--szin-lila-vilagos); color: var(--szin-lila); }
.allapot-jelzo[data-allapot="munkalapra_kiirva"]     { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="lezart"]                { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="atadva"]                { background: #eef2f6; color: var(--szin-szoveg-halvany); }
.allapot-jelzo[data-allapot="megszakitva"]           { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }
.allapot-jelzo[data-allapot="tervezett"]             { background: #eef2f6; color: var(--szin-szoveg-halvany); }
.allapot-jelzo[data-allapot="elvegzett"]             { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="nem_vegzett"]           { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }
.allapot-jelzo[data-allapot="rendben"]               { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="hiba"]                  { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }
.allapot-jelzo[data-allapot="nincs_ellenorizve"]     { background: #eef2f6; color: var(--szin-szoveg-halvany); }
.allapot-jelzo[data-allapot="fizetve"]               { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.allapot-jelzo[data-allapot="reszben_fizetve"]       { background: var(--szin-figyelmeztetes-vilagos); color: var(--szin-figyelmeztetes); }
.allapot-jelzo[data-allapot="nem_fizetve"]           { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }

.flash-lista { display: flex; flex-direction: column; gap: var(--terkoz-2); margin-bottom: var(--terkoz-4); }
.flash-uzenet {
  padding: var(--terkoz-3) var(--terkoz-4);
  border-radius: var(--sarok-kozepes);
  font-size: var(--betumeret-sm);
  font-weight: 500;
}
.flash-uzenet--siker  { background: var(--szin-siker-vilagos); color: #1c6b46; }
.flash-uzenet--hiba   { background: var(--szin-veszely-vilagos); color: #a23d3a; }
.flash-uzenet--info   { background: var(--szin-info-vilagos); color: var(--szin-elsodleges-sotet); }

.szoveg-halvany { color: var(--szin-szoveg-halvany); }
.szoveg-kicsi { font-size: var(--betumeret-sm); }

.racs-oszlopok { display: grid; gap: var(--terkoz-4); }

/* Adattáblázat - önmagában is kártyaként jelenik meg (így minden lista egységes) */
table.adattablazat {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--szin-felulet);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok-nagy);
  box-shadow: var(--arnyek-kartya);
  overflow: hidden;
}
/* Kártyán belül a táblázat nem duplázza a keretet/árnyékot */
.kartya table.adattablazat { border: none; box-shadow: none; border-radius: 0; }
table.adattablazat thead th {
  text-align: left;
  padding: var(--terkoz-3) var(--terkoz-4);
  border-bottom: 1px solid var(--szin-szegely);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--szin-szoveg-halvany);
  background: var(--szin-felulet);
}
table.adattablazat tbody td {
  padding: var(--terkoz-3) var(--terkoz-4);
  border-bottom: 1px solid var(--szin-szegely);
  font-size: var(--betumeret-sm);
}
table.adattablazat tbody tr:last-child td { border-bottom: none; }
table.adattablazat tbody tr:hover { background: #f8fafc; }

/* KPI-csempe (nagy szám + felirat + ikon) */
.stat-racs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--terkoz-4);
}
.stat-csempe {
  position: relative;
  background: var(--szin-felulet);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok-nagy);
  box-shadow: var(--arnyek-kartya);
  padding: 20px;
}
.stat-csempe .cimke { font-size: var(--betumeret-sm); color: var(--szin-szoveg-halvany); font-weight: 600; }
.stat-csempe .ertek { font-size: 30px; font-weight: 800; color: var(--szin-cim); line-height: 1.1; margin-top: var(--terkoz-2); }
.stat-csempe .seged { font-size: var(--betumeret-sm); color: var(--szin-szoveg-halvany); margin-top: var(--terkoz-1); }
.stat-csempe .ikon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--szin-elsodleges-vilagos);
  color: var(--szin-elsodleges);
}
.stat-csempe .ikon svg { width: 20px; height: 20px; }

/* Kártya-törzs: ha a kártya padding:0 + .kartya-fejlec szerkezetű */
.kartya-test { padding: 20px; }

/* Széles táblázat sose tolja szét az oldalt - a saját dobozában görgethető */
.tabla-gorgo { overflow-x: auto; }

/* Jobbra igazított számoszlop, azonos szélességű számjegyekkel */
.adattablazat th.szam,
.adattablazat td.szam { text-align: right; font-variant-numeric: tabular-nums; }

/* Kisebb gomb táblázatsorokba */
.gomb--kicsi { min-height: 32px; padding: 0 12px; font-size: var(--betumeret-sm); }

/* Kártya-fejléc (cím + jobb oldali meta) - táblázatot tartalmazó kártyákhoz */
.kartya-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--terkoz-3);
  padding: 18px 20px;
  border-bottom: 1px solid var(--szin-szegely);
}
.kartya-fejlec h2 { font-size: var(--betumeret-lg); }

/* Sürgős jelölés (lista, kártya) */
.surgos-jel {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--szin-veszely-vilagos);
  color: var(--szin-veszely);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* Figyelmet igénylő kártya - színes bal szegéllyel */
.figyelem-kartya { border-left: 4px solid var(--szin-elsodleges); }
.figyelem-kartya[data-szin="piros"] { border-left-color: var(--szin-veszely); }
.figyelem-kartya[data-szin="sarga"] { border-left-color: var(--szin-marka); }
.figyelem-kartya[data-szin="kek"]   { border-left-color: var(--szin-elsodleges); }
.figyelem-kartya[data-szin="zold"]  { border-left-color: var(--szin-siker); }

@media (max-width: 1100px) {
  .stat-racs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stat-racs { grid-template-columns: 1fr; }
}