/**
 * ================================================
 * FÖLDHASZNÁLAT NYILVÁNTARTÓ RENDSZER
 * Egységes Design System
 * Verzió: 2.0
 * ================================================
 */

/* ================================================
   1. ROOT VÁLTOZÓK - Színek, méretek
   ================================================ */
:root {
	/* Színpaletta - Zöld téma */
	--primary-color: #2d5016;
	--primary-dark: #1a3d0a;
	--primary-light: #4a7c2a;
	--accent-color: #90ee90;
	--accent-hover: #7cdb7c;
	
	/* Semleges színek */
	--white: #ffffff;
	--black: #000000;
	--gray-50: #f8f9fa;
	--gray-100: #f1f3f5;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	
	/* Státusz színek */
	--success: #28a745;
	--danger: #dc3545;
	--warning: #ffc107;
	--info: #17a2b8;
	
	/* Betűtípusok */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-family-monospace: "Courier New", Courier, monospace;
	
	/* Betűméretek */
	--font-size-xs: 0.75rem;      /* 12px */
	--font-size-sm: 0.875rem;     /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;     /* 18px */
	--font-size-xl: 1.25rem;      /* 20px */
	--font-size-2xl: 1.5rem;      /* 24px */
	--font-size-3xl: 1.875rem;    /* 30px */
	--font-size-4xl: 2.25rem;     /* 36px */
	
	/* Térközök */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */
	--spacing-xl: 2rem;      /* 32px */
	--spacing-2xl: 3rem;     /* 48px */
	
	/* Kerekítések */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;
	
	/* Árnyékok */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	/* Átmenetek */
	--transition-fast: 0.15s ease-in-out;
	--transition-base: 0.2s ease-in-out;
	--transition-slow: 0.3s ease-in-out;
}

/* ================================================
   2. GLOBÁLIS ALAPOK
   ================================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--gray-900);
	background-color: var(--gray-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ================================================
   3. TIPOGRÁFIA
   ================================================ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--spacing-lg) 0;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gray-900);
}

h1 { font-size: var(--font-size-4xl); font-weight: 700; }
h2 { font-size: var(--font-size-3xl); font-weight: 600; }
h3 { font-size: var(--font-size-2xl); font-weight: 600; }
h4 { font-size: var(--font-size-xl); font-weight: 600; }
h5 { font-size: var(--font-size-lg); font-weight: 600; }
h6 { font-size: var(--font-size-base); font-weight: 600; }

p {
	margin: 0 0 var(--spacing-md) 0;
	line-height: 1.6;
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--primary-light);
	text-decoration: underline;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

/* ================================================
   4. GOMBOK
   ================================================ */
.btn {
	display: inline-block;
	padding: var(--spacing-sm) var(--spacing-lg);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
	font-family: var(--font-family-base);
}

.btn:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.25);
}

/* Gomb variációk */
.btn-primary {
	color: var(--white);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary:hover {
	background-color: var(--primary-light);
	border-color: var(--primary-light);
	text-decoration: none;
}

.btn-success {
	color: var(--white);
	background-color: var(--success);
	border-color: var(--success);
}

.btn-success:hover {
	background-color: #218838;
	border-color: #1e7e34;
}

.btn-danger {
	color: var(--white);
	background-color: var(--danger);
	border-color: var(--danger);
}

.btn-danger:hover {
	background-color: #c82333;
	border-color: #bd2130;
}

.btn-secondary {
	color: var(--white);
	background-color: var(--gray-600);
	border-color: var(--gray-600);
}

.btn-secondary:hover {
	background-color: var(--gray-700);
	border-color: var(--gray-700);
}

.btn-outline-primary {
	color: var(--primary-color);
	background-color: transparent;
	border-color: var(--primary-color);
}

.btn-outline-primary:hover {
	color: var(--white);
	background-color: var(--primary-color);
}

/* Gomb méretek */
.btn-sm {
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: var(--font-size-sm);
}

.btn-lg {
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: var(--font-size-lg);
}

/* ================================================
   5. ŰRLAPOK
   ================================================ */

/* Checkbox-ok zöld színnel - MINDEN ÁLLAPOT */
input[type="checkbox"] {
	accent-color: #2d5016;
}

.form-check-input {
	border-color: #2d5016 !important;
}

.form-check-input:checked {
	background-color: #2d5016 !important;
	border-color: #2d5016 !important;
}

.form-check-input:focus {
	border-color: #2d5016 !important;
	box-shadow: 0 0 0 0.25rem rgba(45, 80, 22, 0.25) !important;
}

.form-check-input:hover {
	border-color: #4a7c2a !important;
}

/* Text-primary override - ZÖLD */
.text-primary,
.fas.text-primary,
.far.text-primary,
.fab.text-primary,
i.text-primary {
	color: #2d5016 !important;
}

/* ================================================
   5b. ŰRLAP MEZŐK
   ================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	display: block;
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	line-height: 1.5;
	color: var(--gray-900);
	background-color: var(--white);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
}

input[type="search"] {
	border: 2px solid var(--primary-color);
}

textarea {
	min-height: 100px;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: var(--spacing-xs);
	font-weight: 500;
	color: var(--gray-700);
	font-size: var(--font-size-sm);
}

.form-group {
	margin-bottom: var(--spacing-lg);
}

/* ================================================
   6. TÁBLÁZATOK
   ================================================ */
table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--white);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

thead {
	background-color: var(--gray-100);
	border-bottom: 2px solid var(--gray-300);
}

th {
	padding: var(--spacing-md);
	text-align: left;
	font-weight: 600;
	color: var(--gray-700);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

td {
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--gray-200);
	vertical-align: middle;
}

tbody tr:hover {
	background-color: var(--gray-50);
}

tbody tr:last-child td {
	border-bottom: none;
}

/* Táblázat variációk */
.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--gray-50);
}

.table-bordered {
	border: 1px solid var(--gray-300);
}

.table-bordered th,
.table-bordered td {
	border: 1px solid var(--gray-300);
}

.table-hover tbody tr:hover {
	background-color: var(--gray-100);
	cursor: pointer;
}

/* ================================================
   7. KÁRTYÁK & PANELEK
   ================================================ */
.card {
	background-color: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	margin-bottom: var(--spacing-lg);
	overflow: hidden;
}

.card-header {
	padding: var(--spacing-lg);
	background-color: var(--gray-50);
	border-bottom: 1px solid var(--gray-200);
	font-weight: 600;
	font-size: var(--font-size-lg);
}

.card-body {
	padding: var(--spacing-lg);
}

.card-footer {
	padding: var(--spacing-lg);
	background-color: var(--gray-50);
	border-top: 1px solid var(--gray-200);
}

/* Page Header - Oldal fejléc stílus */
.page-header {
	border-left: 4px solid var(--primary-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin: 0 0 var(--spacing-lg) 0;
	background: var(--white);
	width: 100%;
}

.page-header-title {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: var(--white);
	padding: var(--spacing-md) var(--spacing-lg);
	width: 100%;
}

.page-header-title h5 {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--white) !important;
}

.page-header-title i {
	margin-right: var(--spacing-sm);
	color: var(--white) !important;
}

/* Globális szabály minden zöld fejléchez */
div[style*="background: linear-gradient(135deg, #2d5016"] h5,
div[style*="background: #2d5016"] h5 {
	color: white !important;
}

div[style*="background: linear-gradient(135deg, #2d5016"] i,
div[style*="background: #2d5016"] i {
	color: white !important;
}

/* ================================================
   8. ÉRTESÍTÉSEK & ÜZENETEK
   ================================================ */
.alert {
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeaa7;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

/* ================================================
   9. SEGÉDOSZTÁLYOK
   ================================================ */

/* Térközök */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

/* Szöveg igazítás */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Szöveg súly */
.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }

/* Szöveg méret */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Színek */
.text-primary { color: var(--primary-color); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--gray-600); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* ================================================
   10. CONTENT EDITABLE (inline szerkesztés)
   ================================================ */
[contenteditable="true"] {
	background-color: rgba(217, 245, 255, 0.2);
	border: 1px dashed var(--gray-300);
	padding: var(--spacing-xs);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

[contenteditable="true"]:focus {
	outline: 0;
	background-color: rgba(217, 245, 255, 0.4);
	border-color: var(--primary-color);
}

[contenteditable="true"].single-line {
	white-space: nowrap;
	overflow: hidden;
}

[contenteditable="true"].single-line br {
	display: none;
}

td[contenteditable="true"]:focus {
	background-color: var(--gray-100);
}

/* ================================================
   11. PAGINATION (lapozó)
   ================================================ */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	list-style: none;
	padding: 0;
	margin: var(--spacing-lg) 0;
}

.pagination .page-item {
	margin: 0;
}

.pagination .page-link {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
	color: var(--primary-color);
	background-color: var(--white);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition-base);
}

.pagination .page-link:hover {
	background-color: var(--gray-100);
	border-color: var(--primary-color);
}

.pagination .page-item.active .page-link {
	color: var(--white);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	font-weight: 600;
}

/* ================================================
   12. LOADING & SPINNER
   ================================================ */
.spinner {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border: 3px solid var(--gray-300);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ================================================
   13. SZŰRŐ PANEL (Filter Panel)
   ================================================ */
.filter-panel {
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-300);
	border-left: 4px solid var(--primary-color);
	box-shadow: var(--shadow-md);
	margin-bottom: var(--spacing-lg);
	overflow: hidden;
}

.filter-panel-header {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: var(--white);
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-panel-header h5 {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 600;
	letter-spacing: 0.5px;
}

.filter-panel-header h5 i {
	margin-right: var(--spacing-sm);
}

.filter-panel-body {
	background-color: var(--gray-50);
	padding: var(--spacing-lg);
}

.filter-label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--gray-600);
}

.filter-label i {
	margin-right: var(--spacing-xs);
	color: var(--primary-color);
}

.filter-input,
.filter-select {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
	border: 1px solid var(--primary-color);
	border-radius: var(--radius-sm);
	background-color: var(--white);
	transition: all var(--transition-base);
}

.filter-input:focus,
.filter-select:focus {
	outline: 0;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.15);
}

.filter-actions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.btn-filter {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-lg);
	font-size: var(--font-size-sm);
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.btn-filter:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-filter-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

.btn-filter-primary:hover {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
}

.btn-filter-success {
	background-color: var(--success);
	border-color: var(--success);
	color: var(--white);
}

.btn-filter-success:hover {
	background-color: #218838;
	border-color: #1e7e34;
}

/* Filter Grid Layout */
.filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-md);
	align-items: end;
}

@media (min-width: 768px) {
	.filter-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.filter-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.filter-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================
   14. MODAL ABLAKOK
   ================================================ */
.modal-content {
	border-radius: var(--radius-lg);
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: var(--white);
	border-bottom: none;
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header .modal-title {
	font-weight: 600;
	font-size: var(--font-size-lg);
}

.modal-header .close {
	color: var(--white);
	opacity: 1;
	text-shadow: none;
	font-size: 1.5rem;
	font-weight: 300;
}

.modal-header .close:hover {
	color: var(--accent-color);
}

.modal-body {
	padding: var(--spacing-xl);
	background-color: var(--white);
}

.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body select,
.modal-body textarea {
	border: 1px solid var(--primary-color);
	border-radius: var(--radius-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	width: 100%;
	font-size: var(--font-size-base);
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
	outline: 0;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.15);
}

.modal-body label {
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: var(--spacing-xs);
	font-size: var(--font-size-sm);
}

.modal-footer {
	background-color: var(--gray-50);
	border-top: 1px solid var(--gray-200);
	padding: var(--spacing-lg);
}

.modal-footer .btn {
	min-width: 120px;
}

/* ================================================
   15. RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
	:root {
		--font-size-base: 0.875rem;
		--spacing-md: 0.75rem;
		--spacing-lg: 1rem;
	}
	
	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }
	
	table {
		font-size: var(--font-size-xs);
	}
	
	th, td {
		padding: var(--spacing-sm);
	}
}