/* === layout/layout.css ===================================================
   Oldalszerkezet: grid, sidebar, topbar, main, kártya-konténerek, táblázat wrap
========================================================================= */

/* App rács */
.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:0;
}

/* Oldalsáv (szerkezeti) */
.sidebar{
  background:var(--card);
  border-right:1px solid var(--border);
  padding:16px 14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.sidebar .brand{
  font-weight:800;
  letter-spacing:.2px;
  margin:2px 0 14px;
}

/* Felső sáv (szerkezeti) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:16px;
}
.topbar form input[type="search"]{ min-width:260px; }

/* Főtartalom */
main{ padding:24px; min-width:0; }
.content{ padding:24px; min-width:0; }

/* Kártya-konténerek – csak konténer szint! A vizuál a components/cards.css-ben. */
.card{ margin:12px 0; }

/* Rácsok */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }

/* Entity header + actions */
.entity-view-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:8px;
}
.entity-title{ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:700; }
.view-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Táblázat wrap a vízszintes görgetéshez */
.table-wrap{ overflow:auto; }

/* Reszponzív törés */
@media (max-width: 1024px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position:static; height:auto; }
  main{ padding:16px; }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
}