body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:20px;
}

.top{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.flash{
  padding:8px;
  background:#eef;
  border:1px solid #99c;
  margin:10px 0;
}
.err{
  padding:8px;
  background:#fee;
  border:1px solid #c99;
  margin:10px 0;
}

.btn{
  display:inline-block;
  padding:4px 8px;
  font-size:12px;
  text-decoration:none;
  border:1px solid #999;
  background:#f4f4f4;
  border-radius:3px;
}

/* --- TÁBLÁZAT: kisebb betű, kompakt --- */
table{
  border-collapse:collapse;
  width:100%;
  font-size:12px;         /* 👈 kisebb */
}
th, td{
  border:1px solid #ddd;
  padding:4px 6px;        /* 👈 kisebb */
  vertical-align:top;
}
thead th{
  position:sticky; /* opcionális: ha görgettek, maradjon fent */
  top:0;
  background:#fff;
}

/* --- SZŰRŐK: kompakt, ne lógjon ki --- */
.filter-row input[type="text"],
.filter-row input[type="search"]{
  width:100%;
  box-sizing:border-box;
  padding:2px 4px;
  font-size:10px;
  line-height:1.2;
  height:20px;
}

.filter-actions{
  display:flex;
  gap:6px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
}

/* Áttekintő állapot színek – finom, de egyértelmű */
.state-zold {
    background-color: #e6f4ea;   /* halvány zöld */
    color: #1e4620;
}

.state-sarga {
    background-color: #fff4d6;   /* halvány sárga */
    color: #6b4e00;
}

.state-piros {
    background-color: #fde8e8;   /* halvány piros */
    color: #7a1f1f;
}

/* legyen egy kis vizuális összetartás */
.state-zold,
.state-sarga,
.state-piros {
    font-weight: 500;
}