body {
  background-color: #f4f7f6; /* Kicsit semlegesebb háttérszín */
  font-family: Arial, sans-serif;
  padding: 130px 20px 20px; /* Felső padding megnövelve a logó számára */
  text-align: center;
  background-image: url('images/loading_center.png'); /* A CSS fájlhoz képest relatív elérési út */
  background-repeat: no-repeat;
  background-position: center 20px; /* Vízszintesen középre, 20px-re a tetejétől */
  background-size: 100px auto;
}

.back-to-main-button {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: #3498db;
  color: white !important; /* Fontos, hogy felülírja az alapértelmezett link színeket */
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  z-index: 1000; /* Biztosítja, hogy más elemek felett legyen */
  border: none;
  cursor: pointer;
}

/* Konténer a reszponzív táblázatokhoz */
.table-container {
  overflow-x: auto; /* Vízszintes görgetést engedélyez kis képernyőn */
  margin: 20px auto;
  width: 90%;
}

/* --- Általános Táblázat Stílusok --- */
table {
  /* A margin és width átkerült a .table-container-be */
  border-collapse: collapse;
  width: 100%; /* A táblázat kitölti a konténerét */
  background-color: #fff; /* Fehér háttér a jobb olvashatóságért */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Enyhe árnyék */
}
th, td {
  border: 1px solid #ddd; /* Világosabb szegély */
  padding: 12px; /* Több hely */
  text-align: left; /* Balra igazítás a legtöbb oszlophoz */
}
th {
  background-color: #b3e0ff;
  font-weight: bold;
}
td:first-child, th:first-child {
    text-align: center; /* ID-k és sorszámok középre */
}

/* --- Egységesített Űrlap Stílusok --- */
form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
}

.form-inline > * {
  width: auto; /* Felülírja a 100%-os szélességet */
  flex-grow: 1; /* Minden elem megpróbál nőni */
  margin: 0; /* Nullázzuk a margót, a gap kezeli */
}

.form-inline > button {
  flex-grow: 0; /* A gomb ne nőjön */
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #34495e;
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, button {
  width: 100%;
  padding: 12px;
  margin: 5px 0; /* Vertikális margó */
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

select[multiple] {
  height: 150px; /* Adunk neki egy fix magasságot, hogy több elem látszódjon */
  padding: 10px;
}

form small {
  display: block;
  margin-top: 5px;
  color: #7f8c8d;
  font-size: 12px;
}

button, input[type="submit"] {
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border: none;
  font-weight: bold;
}

button:hover, .back-to-main-button:hover {
  background-color: #2980b9;
}

/* --- Táblázat Művelet Gombok --- */
.action-cell {
  text-align: center;
  white-space: nowrap; /* Megakadályozza a gombok törését több sorba */
}

.action-cell form {
  display: inline-block; /* A gombok egymás mellett jelennek meg */
  margin: 0 5px 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.action-cell button {
  width: auto; /* Automatikus szélesség a tartalom alapján */
  padding: 8px 12px;
}

.button-delete {
  background-color: #e74c3c; /* Piros szín a törlés gombnak */
}

/* --- Üzenet Napló Stílus (connection.ejs-hez) --- */
.messages-log {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: left;
  max-width: 800px;
  margin: 2rem auto;
}

/* --- Főmenü Gombok (function_buttons.ejs) --- */
.function-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.menu-button {
  display: block;
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #3498db;
  color: white !important;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-button:hover {
  background-color: #2980b9;
}

.logout-button {
  background-color: #e74c3c; /* Piros a kijelentkezéshez */
}

.logout-button:hover {
  background-color: #c0392b;
}

/* --- Toast Notification --- */
.toast-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 10px);
  padding: 16px 30px;
  border-radius: 8px;
  background-color: #2ecc71; /* Alapértelmezett zöld a sikerhez */
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
}
.toast-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}