/* --- ALAP STÍLUSOK --- */
* {
	user-select: none;
}

.rejtett_tag {
	display: none !important;
	visibility: hidden !important;
}

body {
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	margin: 0;
	padding: 20px 40px;
	background: #f6f7fb;
	color: #1c1c1c;
	height: 95vh;
}

h1 {
	font-size: 32px;
	margin-bottom: 25px;
	font-weight: 600;
	text-align: center;			  /* ⇐ Középre igazítás */
}

h2 {
	margin-top: 40px;
	font-size: 22px;
	font-weight: 500;
	color: #333;
}

/* --- GOMBOK --- */
button, .gomb {
	padding: 10px 20px;
	font-size: 15px;
	cursor: pointer;
	background: #4b6bff;
	border: none;
	color: white;
	border-radius: 8px;
	transition: background 0.25s, transform 0.06s;
	text-decoration: none;
	font-weight: 600;
	font-family: Arial;
	display: inline-block;
}

button:hover, .gomb:hover {
	background: #2f4dea;
}

button:active, .gomb:active {
	transform: translateY(1px);
}

/* --- TÁBLÁZATOK MODERN STÍLUSBAN --- */
table {
	width: fit-content;
	table-layout: fixed;
	/* width: max-content; */
	/* width: 100%; */
	border-collapse: separate;   /* külön spacing kell a kártyasorokhoz */
	border-spacing: 0 10px;	  /* sorköz a „kártya” hatáshoz */
}

/* Fejléc (első sor): halvány, nem kártya */
table tr:first-child {
	background: transparent;
	box-shadow: none;
}

table th {
	text-align: left;
	padding: 10px 12px;
	font-size: 13px;
	color: #666;
	position: sticky;
	top: 10px;                 /* felül tapad */
	background: #f6f7fb;       /* kötelező: takarja az alá gördülő sorokat */
	z-index: 200;             /* a cellák fölött legyen */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sorok mint kártyák */
tbody tr {
	/* background: #fff; */
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	border-radius: 12px;
	white-space: nowrap;
}

.table-inner-wrapper {
	overflow-y: auto;
	display: block;
	height: 100%;
}

#alairasok_tabla_div {
	height: 70%;
	display: block;
}

#takaro_div {
	position: fixed;
	height: 40px;
	width: 95vw;
	background: #f6f7fb;
	z-index: 150;
}

/* Cellák */
table td {
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid #e8eaf0; /* finom kontúr a kártyán */
	border-left: none;
	border-right: none;
	background: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Lekerekített sarkok a sorokon (táblázat-kompatibilis megoldás) */
tbody tr td:first-child {
	border-left: 1px solid #e8eaf0;
	border-top-left-radius: 12px;	  /* ⇐ bal felső sarok */
	border-bottom-left-radius: 12px;   /* ⇐ bal alsó sarok */
}

tbody tr td:last-child {
	border-right: 1px solid #e8eaf0;
	border-top-right-radius: 12px;	 /* ⇐ jobb felső sarok */
	border-bottom-right-radius: 12px;  /* ⇐ jobb alsó sarok */
}

/* FIX OSZLOPOK – 1. oszlop */
table th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 300;
}

/* FIX OSZLOPOK – 2. oszlop */
table th:nth-child(2) {
    position: sticky;
    left: var(--w1);
    z-index: 300;
}

/* FIX OSZLOPOK – 3. oszlop */
table th:nth-child(3) {
    position: sticky;
    left: calc(var(--w1) + var(--w2));
    z-index: 300;
}

/* FIX OSZLOPOK – 1. oszlop */
table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 100;
}

/* FIX OSZLOPOK – 2. oszlop */
table td:nth-child(2) {
    position: sticky;
    left: var(--w1);
    z-index: 100;
}

/* FIX OSZLOPOK – 3. oszlop */
table td:nth-child(3) {
    position: sticky;
    left: calc(var(--w1) + var(--w2));
    z-index: 100;
}

/* --- POPUP HÁTTÉR --- */
#popup_hatter {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(3px);
	z-index: 1000;
}

/* Láthatatlan popup */
.rejtett {
	display: none !important;
}

/* --- POPUP ABLak MODERN STÍLUSBAN --- */
/* Kért: legyen margó is és padding is a bevitelhez */
#popup_ablak {
	width: 420px;
	background: white;
	margin: 20px;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(0,0,0,0.16);
	overflow: hidden;				 /* ⇐ fontos! a sarkok biztosan kerekek maradnak */
}


/* Inner: a ténylegesen scrollozható réteg */
#popup_ablak .popup_tartalom {
	max-height: 90vh;				 /* ⇐ a te magassági feltétel */
	overflow-y: auto;				 /* ⇐ itt scrollozunk */
	box-sizing: border-box;
	padding: 28px;					/* ⇐ belső padding */
	/* opcionális: fix scrollbar sáv fenntartása, ne ugráljon a layout */
	scrollbar-gutter: stable both-edges;
}

@keyframes fadein {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

#popup_ablak h2 {
	margin-top: 0;
	margin-bottom: 18px;
	color: #222;
}

/* --- INPUTOK --- */
.input_sor {
	margin-bottom: 15px;		  /* ⇐ margó az egyes mezők közt */
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.input_sor label {
	font-size: 14px;
	color: #444;
}

.input_sor input,
.input_sor select {
	background: #f2f4f8;
	border: 1px solid #dfe2e8;
	padding: 11px 12px;		   /* ⇐ kényelmesebb padding a mezőkben */
	border-radius: 8px;
	font-size: 15px;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.input_sor input:focus,
.input_sor select:focus {
	border-color: #4b6bff;
	outline: none;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(75,107,255,0.15);
}

/* --- GOMBOK A POPUPBAN --- */
.gombok {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	justify-content: space-around;
}

.gombok button {
	min-width: 110px;
}

.gombok button:nth-child(2) {
	background: #a0a4ad;
}

.gombok button:nth-child(2):hover {
	background: #8a8f99;
}

.szerkesztheto_sor {
	cursor: pointer;
}

#alairas_szuro {
	margin: 20px;
}

.visszavont_alairas {
	background: red;
	color: white;
}

/* --- RESPONSIVE --- */
@media(max-width: 700px) {
	body {
		padding: 16px;
	}

	#popup_ablak {
		width: 95%;
		padding: 22px;
		margin: 10px;	 /* kisebb külső margó kisebb kijelzőn */
	}

	table td, table th {
		padding: 10px;
		font-size: 14px;
	}
}