/* ============================================================================
 * szik.css — Szervezet Információs Központ minimális stílus (10c.1)
 * ============================================================================
 * Csak az alap belépő képernyő (név + szervezet-dropdown + placeholder).
 * A 10c.2-ben az admin felület CRUD elemei, a 10c.3-ban a grafikonok és a
 * kidolgozási popup kapnak további stílusokat.
 * ============================================================================ */

/* Grafikon CSS változók — SVG fallback értékeit ezek felülírják */
:root {
  --szik-chart-bg:    #ffffff;
  --szik-chart-grid:  #c0c6d0;
  --szik-chart-label: #111;    /* fekete — jól olvasható */

  /* Admin lista változók */
  --szl-border:    rgba(0,0,0,0.08);
  --szl-hover:     rgba(8,109,217,0.05);
  --szl-text:      #222;
  --szl-muted:     #666;
}

/* Slot-okat az auto-load után a fragment cseréli ki, üres állapotban
   ne foglaljanak helyet. */
.szik-dashboard-slot,
.szik-admin-slot {
  min-height: 0;
}

/* Közös header (mindkét fragment ugyanazt használja) */
.szik-dashboard,
.szik-admin {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}

.szik-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}

/* Detail fejléc: [← Vissza]  [Stat neve]  [2026/18. hét zárása] */
.szik-detail-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.szik-detail-cim {
  text-align: center;
  font-size: 1rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.szik-detail-jobb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.szik-detail-het {
  font-size: 0.85rem;
  white-space: nowrap;
}

.szik-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.szik-user-name {
  font-weight: 600;
}

.szik-admin-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #d62828;
  color: #fff;
  font-size: 0.8rem;
  border-radius: 999px;
}

.szik-szervezet-valaszto,
.szik-szervezet-fix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.szik-szervezet-valaszto select {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #fff;
  font-size: 0.95rem;
}

/* Dashboard / admin törzs — placeholder állapotban */
.szik-dashboard-body,
.szik-admin-body {
  padding: 1rem;
  min-height: 200px;
}

.szik-placeholder {
  padding: 1.5rem;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  text-align: center;
}

.szik-placeholder ul {
  text-align: left;
  display: inline-block;
  margin-top: 0.5rem;
}

/* "Még nincs SZIK profilod" / "Nincs szervezet" üres állapot */
.szik-empty {
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background: rgba(255, 247, 220, 0.6);
}

.szik-empty p {
  margin: 0;
}

/* ============================================================================
 * Admin felület (10c.2.a + 10c.2.b)
 * ============================================================================ */

/* === Admin tab sáv === */
.szik-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 1.25rem;
}

.szik-admin-tab {
  padding: 0.55rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  color: #555;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
}

.szik-admin-tab:hover {
  color: #3366cc;
  background: rgba(51, 102, 204, 0.05);
}

.szik-admin-tab-aktiv {
  color: #3366cc;
  border-bottom-color: #3366cc;
  font-weight: 600;
}

.szik-admin-content {
  min-height: 300px;
}

/* Modul fejléc — minden admin modul ugyanezt használja */
.szik-modul-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.szik-modul-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* Területi fa táblázata */
.szik-terulet-tabla {
  width: 100%;
  border-collapse: collapse;
}

.szik-terulet-tabla th,
.szik-terulet-tabla td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.95rem;
  vertical-align: middle;
}

.szik-terulet-tabla th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
}

.szik-terulet-inaktiv {
  opacity: 0.55;
}

.szik-terulet-akciok {
  white-space: nowrap;
  text-align: right;
}

/* Általános gombok és badge-ek a SZIK-en belül */
.btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
}

.btn:hover { background: rgba(0, 0, 0, 0.04); }

.btn-primary {
  background: #2c5fa6;
  color: #fff;
  border-color: #2c5fa6;
}

.btn-primary:hover { background: #214a85; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 0.25rem;
  font-size: 0.9rem;
}

.btn-icon:hover { background: rgba(0, 0, 0, 0.05); }

.btn-icon-danger:hover {
  background: #fde2e2;
  border-color: #d62828;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  border-radius: 999px;
  font-weight: 500;
}
.badge-active   { background: #d4f4d4; color: #1f5e1f; }
.badge-inactive { background: #efefef; color: #555;    }

/* Szerkesztő űrlap */
.szik-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
}

.szik-form .form-row label {
  font-weight: 500;
  font-size: 0.95rem;
}

.szik-form .form-row input[type="text"],
.szik-form .form-row input[type="number"],
.szik-form .form-row select {
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.95rem;
  max-width: 400px;
}

.szik-form .form-row small {
  font-size: 0.82rem;
}

.szik-form .form-static {
  padding: 0.4rem 0;
}

.szik-form .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.szik-form .form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================================
 * Személyek és hatáskörök (10c.2.c)
 * ============================================================================ */

.szik-detail-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.szik-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.szik-section-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* ============================================================================
 * Statisztika választó (10c.2.d)
 * ============================================================================ */

.szik-stat-valaszto-layout {
  display: grid;
  grid-template-columns: 160px 180px 1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
  min-height: 400px;
}

.szik-stat-panel {
  border-right: 1px solid rgba(0,0,0,0.08);
  overflow-y: auto;
  padding: 0.5rem;
}

.szik-stat-panel:last-child { border-right: none; }

.szik-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.szik-stat-panel-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.szik-stat-panel-item:hover {
  background: rgba(50,100,200,0.08);
}

.szik-stat-checkbox-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.25rem;
}

.szik-stat-checkbox-sor {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.92rem;
}

.szik-stat-checkbox-sor:hover {
  background: rgba(0,0,0,0.03);
}

.szik-stat-mar-hozzarendelt {
  opacity: 0.6;
  background: rgba(50,180,50,0.06);
}

.szik-stat-checkbox-tartalom {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
}

.szik-stat-kod { font-size: 0.82rem; }
.szik-stat-nev { font-weight: 500; }
.szik-stat-egyseg { font-size: 0.82rem; }

/* ============================================================================
 * Grafikon lista és személy hozzárendelés (10c.2.e)
 * ============================================================================ */

.szik-grafikon-szemely-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
  padding: 0.25rem;
}

/* ============================================================================
 * Dashboard főnézet és grafikon kártyák (10c.3)
 * ============================================================================ */

.szik-lezart-het { font-size: 0.95rem; }

.szik-adatbevitel {
  background: rgba(255, 247, 220, 0.7);
  border: 1px solid rgba(200, 160, 0, 0.3);
  border-radius: 6px;
  padding: 1rem;
  margin: 0.75rem 0;
}

.szik-adatbevitel-cim {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.szik-adatbevitel-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.szik-adatbevitel-sor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.szik-adatbevitel-label {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex: 1;
  min-width: 200px;
}

.szik-adatbevitel-input {
  width: 120px;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.95rem;
}

/* Input + mértékegység egymás mellett, fix szélességű blokk */
.szik-adatbevitel-input-csoport {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 180px;   /* fix szélesség: input + egység helye mindig azonos */
}

.szik-stat-egyseg {
  min-width: 40px;  /* üres egységnél is fenntartja a helyet */
  font-size: 0.88rem;
}

.szik-tartomany {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.szik-tartomany summary {
  cursor: pointer;
  padding: 0.25rem 0;
}

.szik-tartomany-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0.75rem 0;
}

.szik-tartomany-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
}

.szik-tartomany-form input {
  padding: 0.3rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* Grafikon mozaik */
.szik-grafikon-mozaik {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.szik-grafikon-kartya {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}

.szik-grafikon-kartya:hover {
  box-shadow: 0 2px 12px rgba(50,100,200,0.15);
  border-color: rgba(50,100,200,0.4);
}

.szik-kartya-fejlec {
  padding: 0.6rem 0.75rem;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Állapot badge a kártya fejlécében — teljesen jobbra tolva */
.szik-allapot-badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: rgba(51,102,204,0.12);
  color: #2255aa;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.szik-allapot-badge-ures {
  background: transparent;
  color: #aaa;
  font-weight: 400;
}

.szik-kartya-svg {
  padding: 0;
  display: block;
}

/* Grafikon részlet nézet */
.szik-detail-svg { width: 100%; }

.szik-stat-allapot-szekció {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.szik-stat-detail-cim {
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
}

/* Állapot választó */
.szik-allapot-valaszto { margin-top: 0.5rem; }

.szik-kvota-blokk {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.szik-allapot-select {
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  min-width: 200px;
  cursor: pointer;
}

.szik-allapot-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.szik-allapot-option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  background: #fff;
}

.szik-allapot-option:has(input:checked) {
  background: rgba(50,100,200,0.1);
  border-color: rgba(50,100,200,0.5);
}

.szik-allapot-megjelenites {
  margin: 0.5rem 0;
}

.szik-allapot-cimke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

/* Kidolgozási lépések */
.szik-lepesek {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.szik-lepes-sor {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.szik-lepes-szam {
  font-weight: 700;
  color: #3366cc;
  min-width: 24px;
  padding-top: 0.2rem;
}

.szik-lepes-tartalom { flex: 1; }

.szik-lepes-megnevezes {
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.szik-lepes-textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.92rem;
  resize: vertical;
  font-family: inherit;
}

/* Kvóta sor — a textarea alatt, kis méretű input + egység címke */
.szik-lepes-kvota-sor {
  display: flex;
  align-items: center;
  margin-top: 0.4rem;
}

.szik-lepes-kvota-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.szik-lepes-kvota-input {
  width: 110px;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}

.szik-audit-szoveg {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(50,200,50,0.06);
  border-left: 3px solid rgba(50,180,50,0.4);
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
}

.szik-mentes-ok {
  color: #1a7a1a;
  font-size: 0.85rem;
}

/* ============================================================================
 * Navigátor fejléc (10c.3 frissítés — 2 soros)
 * ============================================================================ */

.szik-nav-form {
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.szik-nav-sor1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.szik-nav-sor2-cim {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

/* 3 oszlopos navigátor sor */
.szik-nav-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 0.5rem 0;       /* column-gap: 0 — oszlopok saját padding-ja kezeli a távolságot */
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  padding: 0.25rem 0;  /* csak felső/alsó, bal/jobb az oszlopoknál */
  box-sizing: border-box;
}

.szik-nav-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.szik-nav-col-kozep {
  align-items: center;
}

.szik-nav-col-jobb {
  align-items: center;
}

.szik-nav-col-cim {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

/* Hét blokk: ◄ 2026 / 4. hét ► */
.szik-nav-het-blokk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;   /* gombok közelebb a szöveghez */
  width: 100%;
}

.szik-nav-het-felirat {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  flex: 1;        /* kitölti a maradék helyet a két gomb között */
  cursor: default;
  border-radius: 4px;
  padding: 0.1rem 0.15rem;
}

.szik-nav-nyil {
  background: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: #3366cc;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  flex-shrink: 0;
}
.szik-nav-nyil:hover {
  background: rgba(51,102,204,0.08);
  border-color: #3366cc;
}
.szik-nav-nyil:active {
  background: rgba(51,102,204,0.18);
}

.szik-nav-idopont {
  font-size: 0.72rem;
  color: #999;
  white-space: nowrap;
  text-align: center;
}

.szik-nav-idopont-jobb {
  text-align: center;
}

/* Csúszka blokk (középen) */
.szik-csuszka-blokk {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0.1rem;  /* kis oldalpading hogy ne lógjon ki */
}

.szik-csuszka {
  width: 100%;
  flex: 1;
  accent-color: #3366cc;
  cursor: pointer;
  transform: scaleX(-1);
}

.szik-csuszka-ertek {
  font-size: 0.82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #555;
}

/* régi selectorok — visszafelé kompatibilitás más helyeken */
.szik-nav-sor3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}

.szik-nav-idopont-sor {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
  font-size: 0.75rem;
  color: #999;
}

.szik-het-valaszto {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.szik-nav-select {
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  background: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.szik-nav-select-sm {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Adatbevitel input + mértékegység egymás mellett */
.szik-adatbevitel-input-csoport {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================================
 * Blokk elrendezés (10c.4.c)
 * ============================================================================ */

/* Lista gombok sora (💾 Mentés + Becsuk) */
.szik-lista-gombok {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

.szik-blokk-lista {
  /* üres — csak névtér; a részletes szabályok lentebb a .szik-blokk-lista alatt vannak */
}
.szik-lista-panel {
  padding: 0.4rem 0.5rem;
}
.szik-lista-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.szik-lista-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.szik-lista-tabla th {
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
  padding: 0.2rem 0.3rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.szik-lista-tabla td {
  padding: 0.25rem 0.3rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.szik-lista-ertek:hover {
  background: rgba(51,102,204,0.08);
  border-radius: 3px;
}

.szik-blokk-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.szik-blokk {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 0.5rem;
}

.szik-blokk-grafikonok {
  grid-column: 1;
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 0.5rem;
  align-items: stretch;
}

.szik-blokk-kartya {
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mindkét grafikon azonos fejléc stílus */
.szik-kartya-fejlec,
.szik-7r-fejlec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-sizing: border-box;
}

/* SVG tartalom — flex-grow, egyforma magasság, nincs padding */
.szik-kartya-svg-btn,
.szik-7r-tartalom {
  flex: 1;
  display: block;
  padding: 0;
}

.szik-kartya-svg-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.szik-kartya-svg-btn:hover {
  background: rgba(50,100,200,0.03);
}


/* 7R placeholder */
.szik-7r-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-size: 0.85rem;
  color: #aaa;
}

.szik-7r-badge {
  font-size: 0.88rem;
  font-weight: 600;
  color: inherit;
}

/* Szerkeszt gomb — mindkét kártyán egységes */
.szik-kartya-gear,
.szik-kartya-napi-btn,
.szik-7r-ceruza-btn {
  background: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.45rem;
  color: #555;
  line-height: 1.5;
  font-family: inherit;
  white-space: nowrap;
}

.szik-kartya-gear:hover,
.szik-kartya-napi-btn:hover,
.szik-7r-ceruza-btn:hover {
  background: rgba(51,102,204,0.07);
  border-color: rgba(51,102,204,0.4);
  color: #3366cc;
}

/* Kvóta felirat — jobbra tolva */
.szik-7r-kvota-jobb {
  margin-left: auto;
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
}

/* Felviteli nézet fejléce: [💾]  .....  [Kvóta] */
.szik-7r-felv-fejlec {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.szik-7r-mentes-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.15rem 0.4rem;
  color: #555;
}
.szik-7r-mentes-btn:hover { background: #f0f4ff; border-color: #3366cc; color: #3366cc; }


.szik-7r-kvota-felirat {
  font-size: 0.8rem;
  color: #888;
  text-align: right;
  padding-right: 0.3rem;
}

.szik-7r-felvisz-btn {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  margin-top: 0.2rem;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
}

.szik-7r-felvisz-btn:hover {
  background: #f0f0f0;
}

/* Vezérlő gombok (jobb oldal) */
.szik-blokk-vezerlok {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.25rem 0.15rem;
  border-left: 1px solid rgba(0,0,0,0.06);
  margin-left: 0.25rem;
}

@media (max-width: 600px) {
  .szik-blokk {
    grid-template-columns: 1fr;
  }

  .szik-blokk-grafikonok {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .szik-blokk-vezerlok {
    grid-column: 1;
    flex-direction: row;
    justify-content: center;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-left: 0;
    margin-top: 0.25rem;
    padding: 0.25rem 0;
  }
}

.szik-blokk-btn {
  background: none;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.1s;
}

.szik-blokk-btn:hover { background: rgba(0,0,0,0.06); }
.szik-blokk-btn-elrejt:hover { background: rgba(200,50,50,0.08); color: #c03; }

/* + Új grafikon */
.szik-uj-grafikon-sor {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.szik-uj-grafikon-btn {
  background: none;
  border: 1px dashed rgba(50,100,200,0.4);
  border-radius: 6px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #3366cc;
}

.szik-uj-grafikon-btn:hover {
  background: rgba(50,100,200,0.06);
}

/* Elrejtett blokkok */
.szik-elrejtett-blokklar {
  margin-top: 0.75rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
}

.szik-elrejtett-blokklar summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: #666;
  background: rgba(0,0,0,0.02);
}

.szik-elrejtett-lista {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.szik-elrejtett-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}

/* Beállítások popup */
.szik-beallitas-popup {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.szik-beallitas-fejlec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.szik-beallitas-zar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #888;
}

/* ============================================================================
 * Napi panel és 7R grafikon (10c.4.b+e)
 * ============================================================================ */

.szik-napi-panel {
  padding: 0.5rem;
}

.szik-napi-het-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.szik-napi-het-cim {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.szik-napi-blokk {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.szik-napi-cim {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.szik-kvota-badge {
  font-size: 0.8rem;
  background: rgba(51,102,204,0.1);
  color: #3366cc;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: auto;
  font-weight: 600;
}

.szik-7r-svg { display: block; width: 100%; padding: 0; margin: 0; }

/* Napi beviteli rács — függőleges lista teljes nevekkel */
.szik-napi-grid {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.szik-napi-sor {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 0.4rem;
}

.szik-napi-sor-disabled {
  opacity: 0.4;
}

.szik-napi-nap-nev {
  font-size: 0.88rem;
  color: #444;
}

.szik-napi-jovobeli {
  font-size: 0.85rem;
  color: #aaa;
}

.szik-napi-input {
  width: 100% !important;
  text-align: right;
  padding: 0.25rem 0.4rem;
  font-size: 0.88rem;
}


/* ============================================================================
 * step10c4k frissítés — új stílusok
 * ============================================================================ */

/* 7R fejléc: visszamenőleges hét neve */
.szik-7r-het-nev {
  font-size: 0.78rem;
  font-weight: 400;
  color: #888;
  margin-left: 0.2rem;
}

/* 7R kvóta: jobb igazítás, tördelésvédelem, ezres szám is elfér */
.szik-7r-kvota-jobb {
  margin-left: auto;
  font-size: 0.78rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

/* 7R ikonok (SVG) — méret és igazítás */
.szik-7r-ceruza-btn svg,
.szik-7r-mentes-btn svg {
  display: block;
}

/* Állapot törlése gomb */
.btn-danger {
  background: none;
  border: 1px solid #e05252;
  color: #c0392b;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-danger:hover {
  background: rgba(200,50,50,0.08);
  border-color: #c0392b;
}
.btn-sm {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
}

/* Kvóta blokk — teljes szélességű form */
.szik-kvota-blokk {
  display: block;
}
.szik-kvota-blokk form {
  display: block;
}
.szik-kvota-sor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.szik-lepes-kvota-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.szik-megjegyzes-blokk {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.szik-megjegyzes-megjelenites {
  background: rgba(51,102,204,0.06);
  border-left: 3px solid rgba(51,102,204,0.4);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Ajánlott kvóta badge */
.szik-kvota-ajanlott-badge {
  display: inline-block;
  font-size: 0.72rem;
  color: #1a7a1a;
  background: rgba(26,122,26,0.08);
  border: 1px solid rgba(26,122,26,0.2);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  cursor: help;
}

/* Textarea — resize engedélyezve */
.szik-lepes-textarea {
  resize: vertical;
  min-height: 3.5rem;
}

/* ── Navigátor UX javítások ── */

/* Ev/het span: kattintható */
.szik-nav-ev, .szik-nav-het-txt {
  cursor: pointer;
  border-bottom: 1px dashed rgba(51,102,204,0.4);
  padding-bottom: 1px;
}
.szik-nav-ev:hover, .szik-nav-het-txt:hover {
  border-bottom-color: #3366cc;
  color: #3366cc;
}

/* Inline szerkesztő input */
.szik-nav-inline-input {
  border: 1px solid #3366cc;
  border-radius: 3px;
  padding: 0 0.2rem;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-align: center;
  background: #fff;
  color: #111;
  -moz-appearance: textfield;
}
.szik-nav-inline-input::-webkit-outer-spin-button,
.szik-nav-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Csúszka végpontok jelzői */
.szik-csuszka-vegpont {
  font-size: 0.7rem;
  color: #bbb;
  flex-shrink: 0;
}

/* Oszlopok vizuális elválasztása */
.szik-nav-3col {
  column-gap: 0;
}
.szik-nav-col-bal,
.szik-nav-col-kozep,
.szik-nav-col-jobb {
  padding: 0.4rem 0.75rem;
  box-sizing: border-box;
}
.szik-nav-col-kozep {
  border-left:  1px solid rgba(0,0,0,0.1);
  border-right: 1px solid rgba(0,0,0,0.1);
}

/* 7R grafikon — kattintható SVG gomb */
.szik-7r-svg-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.szik-7r-svg-btn:hover {
  opacity: 0.85;
}

/* ── 7R nagyított nézet ── */
.szik-napi-detail-lap {
  padding: 1rem 1.25rem;
  max-width: 760px;
  margin: 0 auto;
}

.szik-napi-detail-fejlec {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.szik-napi-detail-vissza {
  background: none;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  color: #3366cc;
  transition: background 0.12s;
}
.szik-napi-detail-vissza:hover {
  background: rgba(51,102,204,0.08);
  border-color: #3366cc;
}

.szik-napi-detail-cim {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.szik-napi-detail-kvota {
  margin-left: auto;
  font-size: 0.9rem;
}

.szik-napi-detail-svg {
  width: 100%;
}
.szik-napi-detail-svg svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Személy admin kiegészítések ===== */

.szuro-szam {
  width: 7rem;
}

.szik-szemely-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.szik-header-akciok {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.szik-inaktiv td {
  opacity: 0.55;
}

.form-row-inline {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.form-row-inline > div {
  flex: 1;
  min-width: 10rem;
}

.form-row-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.szik-error {
  background: #fff0f0;
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  color: #c00;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.akciok-col {
  width: 6rem;
  text-align: center;
}

.small {
  font-size: 0.8rem;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--link, #1a56db);
  text-decoration: underline;
  font-size: inherit;
}

.btn-link:hover {
  color: var(--link-hover, #1240a0);
}

/* ===== Személyek lista ===== */

.szl-lista {
  width: 100%;
  margin-top: 0.5rem;
}

.szl-lista > .szl-sor {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--szl-border);
  cursor: pointer;
  transition: background 0.1s ease;
  text-decoration: none;
}

.szl-lista > .szl-sor > * {
  min-width: 0;
  flex-shrink: 1;
}

.szl-sor:first-child {
  border-top: 1px solid var(--szl-border);
}

.szl-sor:hover {
  background: var(--szl-hover);
}

.szl-sor:focus {
  outline: 2px solid #086dd9;
  outline-offset: -2px;
  border-radius: 2px;
}

.szl-inaktiv {
  opacity: 0.45;
}

.szl-nev {
  flex: 0 0 28%;
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--szl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}

.szl-email {
  flex: 0 0 30%;
  display: block;
  font-size: 0.875rem;
  color: var(--szl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}

.szl-szervezet {
  flex: 1 1 0;
  display: block;
  font-size: 0.875rem;
  color: var(--szl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}

.szl-allapot {
  flex: 0 0 6rem;
  display: block;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════
   Személyek lista — <details> alapú kinyitható nézet
   Mintakép-alapú kompakt admin-lista, oszlopfejléccel,
   kék-kiemelt nyitott sorral.
   ══════════════════════════════════════════════════════════ */

/* — Kereső sor —
   Bal oldalon nagy szöveges kereső (felül halvány label),
   jobb oldalon az osztály-szűrő select + Keresés gomb. */
.szik-szuro-sor {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.szik-szuro-mezo {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.szik-szuro-mezo:focus-within {
  border-color: rgba(8,109,217,0.55);
  box-shadow: 0 0 0 2px rgba(8,109,217,0.12);
}

.szik-szuro-label {
  font-size: 0.78rem;
  color: var(--szl-muted);
  padding: 0.3rem 0.7rem 0.1rem;
  line-height: 1.2;
  user-select: none;
}

.szik-szuro-q {
  padding: 0 0.7rem 0.4rem;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.szik-szuro-select {
  height: 2.55rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
}

/* — Egyszerű, egysoros kereső input (1.b verzió) —
   A korábbi „felül kis label, alul input" elrendezést leváltja.
   Egyetlen mező, placeholder-ben a leíró szöveg. */
.szik-szuro-q-egyszeru {
  flex: 1 1 22rem;
  height: 2.55rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.szik-szuro-q-egyszeru:focus {
  border-color: rgba(8,109,217,0.55);
  box-shadow: 0 0 0 2px rgba(8,109,217,0.12);
}

/* — Lista konténer — */
.szl-lista-uj {
  width: 100%;
  border-top: 1px solid var(--szl-border);
}

/* — Oszlop-fejléc sor —
   Halvány szürke csík, kis félkövér betűk, az alatta lévő
   sorok rasztere ezt követi (flex-arányok lent egyeznek). */
.szl-fejlec {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem 0.5rem 1rem;
  background: rgba(0,0,0,0.025);
  border-bottom: 1px solid var(--szl-border);
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  user-select: none;
}
.szl-fejlec-id      { flex: 0 0 3.5rem; }
.szl-fejlec-nev     { flex: 0 0 28%; }
.szl-fejlec-email   { flex: 1 1 0; min-width: 0; }
.szl-fejlec-poszt   { flex: 0 0 14rem; padding-right: 1.6rem; }
.szl-fejlec-allapot { flex: 0 0 auto; margin-left: auto; padding-right: 1.6rem; }

/* — Egy személy kinyitható eleme — */
.szl-item {
  border-bottom: 1px solid var(--szl-border);
  /* bal-oldali jelölő helye: 3px sáv a nyitott állapothoz */
  border-left: 3px solid transparent;
  background: #fff;
  transition: background-color 0.12s, border-left-color 0.12s;
}

/* — Summary sor (collapsed alapnézet) — */
.szl-item-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.95rem;
  position: relative;
}
.szl-item-summary::-webkit-details-marker { display: none; }
.szl-item-summary:hover { background: rgba(0,0,0,0.02); }

/* Oszlopok — a fejléc rasztere */
.szl-item-id {
  flex: 0 0 3.5rem;
  color: var(--szl-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.szl-item-nev {
  flex: 0 0 28%;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--szl-text);
}
.szl-item-email {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--szl-muted);
  font-size: 0.9rem;
}
.szl-item-poszt {
  flex: 0 0 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.szl-item-allapot {
  flex: 0 0 auto;
  margin-left: auto;
}

/* — Aktuális poszt pill-ek — */
.szl-poszt-pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.szl-poszt-aktiv {
  background: #d4f4d4;
  color: #1f5e1f;
}
.szl-poszt-nincs {
  background: #efefef;
  color: #777;
  font-style: italic;
  font-weight: 400;
}
.szl-poszt-megszunt {
  background: #efefef;
  color: #777;
  font-weight: 400;
}

/* Jobb széli kis háromszög — CSS-szel, hogy konzisztens legyen
   és <script> nélkül elforduljon nyitáskor. */
.szl-item-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;       /* jobbra mutató háromszög */
  border-color: transparent transparent transparent #2a6fc6;
  margin-left: 0.4rem;
  transition: transform 0.12s ease;
}
.szl-item[open] > .szl-item-summary::after {
  transform: rotate(90deg);          /* lefelé mutat nyitott állapotban */
}

/* — Nyitott állapot: kék bal-jelölő + halvány kék háttér — */
.szl-item[open] {
  border-left-color: #2a6fc6;
  background: var(--szl-hover);      /* rgba(8,109,217,0.05) */
}
.szl-item[open] > .szl-item-summary {
  border-bottom: 1px solid rgba(8,109,217,0.18);
}

/* — Inaktív személy halványítása (a meglévő logikát megtartja) — */
.szl-item.szik-terulet-inaktiv .szl-item-nev,
.szl-item.szik-terulet-inaktiv .szl-item-email {
  opacity: 0.6;
}

/* — Kinyitott tartalom — */
.szl-item-body {
  padding: 0.6rem 0.9rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* — Belső panelek (Személy adatai, egy poszt, …) —
   Keret nélkül, csak halvány elválasztó a panelek között. */
.szl-panel {
  background: transparent;
  border: none;
  border-top: 1px dashed rgba(0,0,0,0.12);
  padding-top: 0.4rem;
}
.szl-panel:first-child {
  border-top: none;
  padding-top: 0;
}

/* Panel summary: kis háromszög + cím balra, akciógombok jobbra */
.szl-panel-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: #2a6fc6;
  list-style: none;
  user-select: none;
}
.szl-panel-summary::-webkit-details-marker { display: none; }

/* Háromszög a panel-summary elejére */
.szl-panel-summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #2a6fc6;
  transition: transform 0.12s ease;
}
.szl-panel[open] > .szl-panel-summary::before {
  transform: rotate(90deg);
}

.szl-panel-body {
  padding: 0.4rem 0 0.2rem 1rem;     /* bal beljebbhúzás a háromszöghez */
}

/* Akciógombok a panel-summary jobb oldalára igazítva */
.szl-panel-akciok {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0;
  border: none;
}
/* Ha a panel-summary tartalmaz akciókat, azok jobbra; ha külön
   sorban (régi felépítés) jönnek a body alatt, akkor is működjön. */
.szl-panel-summary .szl-panel-akciok {
  margin-left: auto;
}
.szl-panel > .szl-panel-akciok {
  margin-top: 0.4rem;
  padding-left: 1rem;
}

/* — Adat-rács (Személy adatai panel) — */
.szl-adat-grid {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.szl-adat-sor {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.875rem;
  padding: 0.15rem 0;
}

.szl-adat-cimke {
  flex: 0 0 5.5rem;
  color: var(--szl-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.szl-adat-ertek {
  flex: 1;
  color: var(--szl-text);
}

/* — Posztok szekció fejléc elválasztó — */
.szl-posztok-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem 0.45rem 1rem;
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid var(--szl-border);
  border-bottom: 1px solid var(--szl-border);
}
.szl-posztok-cim {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--szl-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* — Munkatárs lista (szervezet admin) — */
.szl-munkatars-lista {
  padding: 0 0 0.5rem 0;
}
.szl-munkatars-sor {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--szl-border);
  font-size: 0.88rem;
}
.szl-munkatars-sor.szik-terulet-inaktiv {
  opacity: 0.5;
}
.szl-munkatars-empty {
  padding: 0.6rem 1rem;
  color: var(--szl-muted);
  font-size: 0.85rem;
}

/* — Üres lista állapot (az ürességet a fejléc alatt mutassuk) — */
.szl-empty {
  padding: 1rem;
  text-align: center;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid var(--szl-border);
  color: var(--szl-muted);
}

/* — Inline edit (Személy adatai panel mezői) — */

/* Megjelenítő szöveg: kattintható, hover-en halvány aláhúzás */
.szl-inline-view {
  display: inline-block;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  margin: -0.1rem -0.3rem;
  border-radius: 3px;
  border-bottom: 1px dashed transparent;
  transition: background-color 0.12s, border-bottom-color 0.12s;
}
.szl-inline-view:hover {
  background: rgba(8,109,217,0.08);
  border-bottom-color: rgba(8,109,217,0.4);
}
.szl-inline-ures {
  font-size: 0.85rem;
}

/* Szerkesztő input — a szöveg helyén jelenik meg */
.szl-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}
.szl-inline-input {
  font: inherit;
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(8,109,217,0.55);
  border-radius: 3px;
  outline: none;
  background: #fff;
  min-width: 14rem;
  box-shadow: 0 0 0 2px rgba(8,109,217,0.12);
}
.szl-inline-hiba .szl-inline-input {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
}
.szl-inline-hibauzenet {
  color: #c0392b;
  font-size: 0.8rem;
  margin-left: 0.4rem;
}

/* Mentés / Mégse gombok az inline edit mellett */
.szl-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: background 0.1s;
}
.szl-inline-btn-save {
  border-color: rgba(8,109,217,0.35);
  color: #086dd9;
}
.szl-inline-btn-save:hover {
  background: rgba(8,109,217,0.1);
}
.szl-inline-btn-cancel {
  border-color: rgba(0,0,0,0.2);
  color: var(--szl-muted);
}
.szl-inline-btn-cancel:hover {
  background: rgba(0,0,0,0.06);
}

/* — Új-személy felviteli sor (sárga, kibontott, szerkeszthető) —
   A lista fölé töltődik, oszlopfejléc fölött, a #szl-uj-szemely-slot div-be. */
.szl-uj-sor {
  background: #fff8d8;                  /* halvány sárga háttér */
  border: 1px solid #e6c98b;
  border-left: 3px solid #d6a838;       /* sárgás bal-jelölő, mint a kék open-jelölő */
  border-radius: 0;
  padding: 0.7rem 0.9rem 0.9rem 1rem;
  margin-bottom: 0.6rem;
}

.szl-uj-fejlec {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
}
.szl-uj-cim {
  font-weight: 700;
  color: #6b4f00;
}
.szl-uj-info {
  font-size: 0.85rem;
}

.szl-uj-input {
  font: inherit;
  width: 100%;
  max-width: 22rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  outline: none;
  background: #fff;
}
.szl-uj-input:focus {
  border-color: rgba(8,109,217,0.55);
  box-shadow: 0 0 0 2px rgba(8,109,217,0.12);
}

.szl-uj-akciok {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.6rem;
  margin-top: 0.5rem;
  border-top: 1px dashed rgba(0,0,0,0.15);
}

.szl-uj-hiba {
  background: #fde8e8;
  border: 1px solid #c0392b;
  color: #80201a;
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* — Reszponzivitás —
   ≤640px: Email oszlop eltűnik (a panelben látható), a Név
   és a Poszt összébb húzódik. */
@media (max-width: 640px) {
  .szl-fejlec-email,
  .szl-item-email { display: none; }
  .szl-fejlec-nev,
  .szl-item-nev   { flex: 1 1 0; }
  .szl-fejlec-poszt,
  .szl-item-poszt { flex: 0 0 9rem; }
}

.szik-szerv-szekció {
  margin-bottom: 1.5rem;
}

.szik-szerv-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--border, #e0e0e0);
  margin-bottom: 0.75rem;
}

.szik-szerv-cim {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.szik-szerv-nev {
  font-weight: 600;
  font-size: 1rem;
}

.badge-hataskor {
  background: #e8f0fe;
  color: #1a56db;
  border: 1px solid #c3d3f8;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
}

.szik-poszt-kartya-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.szik-poszt-kartya {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: var(--bg, #fff);
}

.szik-poszt-kartya.szik-inaktiv {
  opacity: 0.6;
  background: var(--bg-muted, #f9f9f9);
}

.szik-poszt-kartya-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.szik-poszt-nev {
  font-weight: 500;
  font-size: 0.95rem;
}

.szik-poszt-akciok {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.szik-poszt-adatok {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.szik-poszt-adat {
  color: var(--text, #333);
}

.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

/* ===== Személy detail — poszt kártyák ===== */

.spd-szerv-blokk {
  margin-bottom: 1.5rem;
}

.spd-szerv-sor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  margin-bottom: 0.75rem;
}

.spd-szerv-nev {
  font-weight: 600;
  font-size: 1rem;
}

.spd-hataskor {
  font-size: 0.85rem;
  color: #555;
  background: #f0f4fb;
  border: 1px solid #d0daf0;
  border-radius: 10px;
  padding: 0.1rem 0.6rem;
}

.spd-posztok {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spd-kartya {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  background: #fff;
}

.spd-kartya-inaktiv {
  opacity: 0.55;
  background: #f8f8f8;
}

.spd-kartya-edit {
  border-color: #086dd9;
  background: #f7faff;
}

.spd-kartya-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.spd-poszt-nev {
  font-weight: 500;
}

.spd-kartya-akciok {
  display: flex;
  gap: 0.25rem;
}

.spd-kartya-adatok {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #444;
}

.spd-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.spd-edit-sor {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.spd-edit-sor .form-row {
  flex: 1;
  min-width: 10rem;
  margin: 0;
}

.spd-edit-sor .form-row label {
  display: block;
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 0.2rem;
}

.spd-edit-sor .form-row input,
.spd-edit-sor .form-row select {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.9rem;
}

.spd-edit-akciok {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.spd-ures {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}