/* =========================================================================
   LAMAREDA Kezelő - saját, wp-admintól teljesen független alkalmazás-stílus.
   A márka-tokeneket (színek, betűtípusok) a main.css :root-jából örökli
   (lásd functions.php - a "lamareda-kezelo" stílus a "lamareda-main"
   függőségeként van betöltve), de a saját elrendezése (fülek, kártyák,
   űrlapok) semmiben nem hasonlít a gyári WordPress admin kinézetére.
   ========================================================================= */

body.lamareda-kezelo-app {
	background: var(--color-cream-dark);
	color: var(--color-text);
	font-family: var(--font-body);
	margin: 0;
	min-height: 100vh;
}

/* --------------------------- Belépő képernyő --------------------------- */
.kezelo-auth {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--color-black);
}
.kezelo-auth__card {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 40px 36px;
	width: 100%;
	max-width: 380px;
	text-align: center;
}
.kezelo-auth__brand {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	color: var(--color-black);
	margin-bottom: 6px;
}
.kezelo-auth__brand em { color: var(--color-gold); font-style: normal; }
.kezelo-auth__intro { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 20px; }
.kezelo-auth__error {
	background: #fbeaea;
	color: #9a2f2f;
	border: 1px solid #e7b8b8;
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 18px;
}
.kezelo-auth__form { text-align: left; display: flex; flex-direction: column; gap: 16px; }
.kezelo-auth__back {
	display: inline-block;
	margin-top: 22px;
	font-size: 0.82rem;
	color: var(--color-text-muted);
	text-decoration: none;
}
.kezelo-auth__back:hover { color: var(--color-gold); }

/* ----------------------------- Alkalmazás-váz ----------------------------- */
.kezelo-app { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }

.kezelo-topbar {
	background: var(--color-black);
	color: var(--color-cream-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 20px;
	margin: 0 -20px 0;
}
.kezelo-topbar__brand { font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0.03em; }
.kezelo-topbar__brand em { color: var(--color-gold); font-style: normal; }
.kezelo-topbar__links { display: flex; gap: 20px; flex-wrap: wrap; }
.kezelo-topbar__links a { color: var(--color-gold-light); text-decoration: none; font-size: 0.85rem; }
.kezelo-topbar__links a:hover { color: var(--color-white); text-decoration: underline; }

.kezelo-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 24px 0 28px;
	border-bottom: 1px solid #ddd6c9;
}
.kezelo-tabs__item {
	display: inline-block;
	padding: 10px 18px;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.kezelo-tabs__item:hover { color: var(--color-black); }
.kezelo-tabs__item.is-active {
	color: var(--color-black);
	border-bottom-color: var(--color-gold);
	font-weight: 500;
}

.kezelo-main h1 {
	font-family: var(--font-heading);
	font-size: 1.9rem;
	color: var(--color-black);
	margin: 0;
}

.kezelo-flash {
	padding: 10px 16px;
	border-radius: var(--radius);
	font-size: 0.88rem;
	margin-bottom: 20px;
}
.kezelo-flash--ok { background: #e8f3ea; color: #2c6b3a; border: 1px solid #b9dcc0; }
.kezelo-flash--err { background: #fbeaea; color: #9a2f2f; border: 1px solid #e7b8b8; }

.kezelo-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 22px;
}

/* --------------------------------- Kereső --------------------------------- */
.kezelo-search { margin-bottom: 24px; }
.kezelo-search input[type="search"] {
	width: 100%;
	max-width: 360px;
	padding: 10px 14px;
	border: 1px solid #d8d2c4;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.9rem;
	background: var(--color-white);
	color: var(--color-text);
}

/* A kereséskor / sorrendezéskor elrejtett elemek biztosan ne látszódjanak -
   a .kezelo-row / .kezelo-group osztályok flex/grid display-je felülírná a
   böngésző alapértelmezett "[hidden]{display:none}" szabályát, ezért itt
   explicit módon, nagyobb elsőbbséggel kimondjuk. */
.kezelo-row[hidden],
[data-kezelo-group][hidden] { display: none !important; }

/* ------------------------------- Gombok ------------------------------- */
.kezelo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid var(--color-black);
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-black);
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}
.kezelo-btn:hover { background: var(--color-black); color: var(--color-white); }
.kezelo-btn--primary { background: var(--color-black); color: var(--color-white); }
.kezelo-btn--primary:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }
.kezelo-btn--block { width: 100%; justify-content: center; }

/* ----------------------------- Csoport / lista ----------------------------- */
.kezelo-group { margin-bottom: 34px; }
.kezelo-group__title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	color: var(--color-black);
	border-bottom: 1px solid #ddd6c9;
	padding-bottom: 8px;
	margin-bottom: 10px;
}
.kezelo-empty { color: var(--color-text-muted); font-size: 0.88rem; padding: 8px 0 18px; }

.kezelo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kezelo-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--color-white);
	border: 1px solid #e8e2d4;
	border-radius: var(--radius);
	padding: 12px 16px;
}
.kezelo-row.is-dragging { opacity: 0.4; }
.kezelo-row__handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.kezelo-row__handle:hover { color: var(--color-gold); }
.kezelo-row__handle:active { cursor: grabbing; }
.kezelo-row__title { flex: 1 1 220px; font-weight: 500; }
.kezelo-row__meta { color: var(--color-gold); font-family: var(--font-heading); font-size: 1.05rem; min-width: 90px; }
.kezelo-row__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kezelo-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #ddd6c9;
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}
.kezelo-row__icon:hover { border-color: var(--color-gold); color: var(--color-gold); }
.kezelo-row__edit, .kezelo-row__delete { font-size: 0.82rem; text-decoration: none; }
.kezelo-row__edit { color: var(--color-black); text-decoration: underline; }
.kezelo-row__delete { color: #9a2f2f; }
.kezelo-row__delete:hover { text-decoration: underline; }

/* Galéria - kártyás rács nézet. "align-items: start" KULCSFONTOSSÁGÚ: enélkül
   a CSS Grid alapértelmezetten minden kártyát az adott sor legmagasabb
   elemének magasságára nyújt, ami furcsa, nagy üres helyet hagyott a cím és a
   gombsor között - ez volt a "furcsa UI" visszajelzés valódi oka. */
.kezelo-list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; align-items: start; }
.kezelo-row--card { flex-direction: column; align-items: center; text-align: center; }
.kezelo-row--card .kezelo-row__handle--card { align-self: center; margin-bottom: -4px; }
.kezelo-row__thumb { width: 100%; margin-bottom: 8px; }
.kezelo-row__thumb img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--radius); }

/* ------------------------------- Űrlapok ------------------------------- */
.kezelo-form-wrap { max-width: 560px; }
.kezelo-form { display: flex; flex-direction: column; gap: 18px; }
.kezelo-field { display: flex; flex-direction: column; gap: 6px; }
.kezelo-field > span { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.kezelo-field input[type="text"],
.kezelo-field input[type="number"],
.kezelo-field input[type="password"],
.kezelo-field input[type="file"],
.kezelo-field select,
.kezelo-field textarea {
	font-family: var(--font-body);
	font-size: 0.95rem;
	padding: 10px 12px;
	border: 1px solid #d8d2c4;
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-text);
}
.kezelo-field--small { max-width: 160px; }
.kezelo-field--allergens > span { margin-bottom: 2px; }
.kezelo-allergens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 6px 16px;
	border: 1px solid #e8e2d4;
	border-radius: var(--radius);
	padding: 12px;
	max-height: 220px;
	overflow-y: auto;
}
.kezelo-allergens__item { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.kezelo-current-image { margin-top: -8px; }
.kezelo-current-image img { border-radius: var(--radius); }
.kezelo-form__actions { margin-top: 6px; }

/* Húzd-ide képfeltöltő doboz - a valódi file input láthatatlanul,
   teljes méretben kitölti a dobozt, így kattintva ÉS ráhúzva is működik. */
.kezelo-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px dashed #d8d2c4;
	border-radius: var(--radius);
	padding: 26px 16px;
	text-align: center;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: var(--transition);
}
.kezelo-dropzone:hover,
.kezelo-dropzone.is-dragover {
	border-color: var(--color-gold);
	background: rgba(198, 164, 99, 0.08);
	color: var(--color-black);
}
.kezelo-dropzone__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.kezelo-dropzone__icon { font-size: 1.5rem; }
.kezelo-dropzone__text { font-size: 0.85rem; }
.kezelo-dropzone__filename { font-size: 0.82rem; font-weight: 500; color: var(--color-black); min-height: 1.1em; }

/* --------------------------------- Egyéb --------------------------------- */
.kezelo-denied p { color: var(--color-text-muted); }

@media (max-width: 640px) {
	.kezelo-topbar { margin: 0 -12px 0; padding: 14px 16px; }
	.kezelo-app { padding: 0 12px 40px; }
	.kezelo-row__meta { order: 2; }
	.kezelo-row__actions { order: 3; width: 100%; justify-content: flex-start; }
}