/* A Cerulean Bootstrap mellé betöltődő, alkalmazásspecifikus kiegészítések. */

/* Sticky footer flexboxszal: rövid tartalomnál az ablak aljára kerül, hosszúnál a tartalom után */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer {
	margin-top: auto;
}

/* Fejléc: az eredeti arculati sáv, középre igazított logóval. */
header {
	background-color: #41afdc;
}
/* A link kitölti a teljes sávot, így az egész kék felület kattintható.
   A kép block, hogy ne lógjon alatta az alapvonal miatti néhány pixel,
   a vízszintes középre igazítást pedig a margin: 0 auto végzi. */
header a {
	display: block;
}
header img {
	display: block;
	margin: 0 auto;
	max-width: 100%;   /* keskeny kijelzőn arányosan kisebb */
	height: auto;
}

/* Jobb felső linkek (a régi #logindiv helyett). */
.pm-toplinks {
	text-align: right;
}

.pm-pagehead > .pm-toplinks:only-child {
	margin-left: auto;
}

.pm-admin-link {
	opacity: 0.25;
}
a:hover > .pm-admin-link,
a:focus-visible > .pm-admin-link {
	opacity: 1;
}

/* Tartalom. */
main {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 1.5rem 1rem 2rem;
}

/* Ha a szélességet a Bootstrap rácsa (.container + .row + .col-*) szabja meg,
   akkor a main csak szemantikai burkoló, saját korlátozás nélkül. */
main.pm-grid {
	max-width: none;
	padding: 0;
}

/* A QR-kód fix 256 px-es vásznat rajzol, ami keskeny kijelzőn kilógna a kártyából
   (320 px-es telefonon az egész oldal vízszintesen görgethetővé vált). */
#qrcode {
	max-width: 100%;
}

#qrcode img,
#qrcode canvas {
	max-width: 100%;
	height: auto;
}

/* A JS ide-oda mozgatja a cache-elt táblázatokat; sosem látható. */
#repo { display: none; }

/* A slots.js a helyszín-szűrésnél ezzel rejt sorokat és cellákat.
   A Bootstrap 5 nem definiál .hidden-t (ott .d-none van), nincs ütközés. */
.hidden { display: none; }

/* Egyenletes oszlopszélesség a generált rácsokban. A cellák közötti rés
   eredetileg a böngésző alapértelmezett border-spacing-je volt; a Bootstrap
   reboot border-collapse: collapse-ot ad a table-nek, ezért kell visszaállítani. */
#calendar_main table,
#slots_main table {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
}
#calendar_main td { padding: 0; }
#slots_main {
	text-align: center;
	font-weight: bold;
	/* Sok helyszín-oszlopnál inkább gördüljön, mint hogy szétessen a tartalom. */
	overflow-x: auto;
}

/* A cellákat kitöltő gomb. Az osztálynevet a megosztott calendar.js /
   slots.js írja rá, ezért nem cserélhető .btn-re anélkül, hogy az
   index.php is változna. A deklarációk többsége szerkezeti: töltse ki
   a cellát és legyen átlátszó, hogy látszódjon a cell_* háttér.
   (Mellékesen: .btn esetén a :disabled pointer-events: none elnyomná
   a not-allowed kurzort is.) */
.table_button {
	background: none;
	border: none;
	width: 100%;
	padding: 0.5em 0;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
	overflow-wrap: break-word;
}
.table_button[disabled] { cursor: not-allowed; }

/* Telítettség és állapot. A jelentés és a konkrét színek is a vendégoldallal
   (index.php / uh2.css) közösek: a határozott, telített színek gyors
   áttekinthetőséget adnak, és a felhasználók ezeket szokták meg. */
.cell_free     { background: #04d01d; }
.cell_crowded  { background: #efa51d; }
.cell_full     { background: #dc3535; }
.cell_locked   { background: #808080; }
.cell_disabled { background: #f0f0f0; }
.cell_taken    { background: #80c0c0; }
.cell_today    { background: #00d0ff; }

/* Kiválasztott nap / idősáv. Inset keret, hogy bármelyik cell_* háttér
   fölött látható legyen és ne toljon el semmit. */
.day_active, .slot_active { box-shadow: 0 0 4px 4px inset #1c1ce3; }

/* Kötelező mező. A Bootstrapnek nincs rá natív megoldása. */
label.required::after { content: " *"; color: var(--bs-danger); }

/* AJAX várakozó réteg (func.php print_ajax_overlay). A z-index szándékosan
   a Bootstrap legmagasabb rétege (tooltip, 1080) fölött van. */
#ajax_overlay {
	position: fixed;
	display: none;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	z-index: 1500;
}
#ajax_overlay table, #ajax_overlay td {
	width: 100%;
	height: 100%;
	text-align: center;
}
#ajax_to_msg { display: none; }