/*
 * Foodle modern stylesheet — minimal kiegészítés a Bootstrap 5-höz.
 *
 * A korábbi `foodle.build.css` Bootstrap 3 + UNINETT téma volt, ami a
 * CDN-ről betöltött BS5-öt felülírta és attól tűnt minden „régi stílusúnak".
 * Ezt a stylesheetet kifejezetten a BS5-höz tervezzük, csak Foodle-specifikus
 * kiegészítéseket tartalmaz (hero gradient, profile dropdown, foodle-info card).
 */

:root {
	--foodle-primary:        #2563eb;
	--foodle-primary-strong: #1d4ed8;
	--foodle-accent:         #7c3aed;
	--foodle-dark:           #0f172a;
	--foodle-soft:           #f1f5f9;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	background: var(--foodle-soft);
	color: #1e293b;
	letter-spacing: 0;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.navbar.bg-primary {
	background: linear-gradient(90deg, var(--foodle-primary) 0%, var(--foodle-accent) 100%) !important;
	border: 0;
}
.navbar-brand {
	font-weight: 600;
	letter-spacing: -0.01em;
}
.navbar .dropdown-menu {
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
	border: 0;
	border-radius: 0.75rem;
	min-width: 16rem;
}
.navbar .dropdown-item {
	padding: 0.55rem 1rem;
}
.navbar .dropdown-header-user {
	padding: 0.75rem 1rem 0.25rem;
}
.navbar .dropdown-header-user .name {
	font-weight: 600;
	color: #0f172a;
}
.navbar .dropdown-header-user .email {
	font-size: 0.8rem;
	color: #64748b;
	word-break: break-all;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.foodle-hero {
	background: linear-gradient(120deg, var(--foodle-primary) 0%, var(--foodle-accent) 60%, #db2777 100%);
	border-radius: 1rem;
	overflow: hidden;
	position: relative;
}
.foodle-hero::after {
	content: "";
	position: absolute;
	top: -60%;
	right: -20%;
	width: 60%;
	height: 220%;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.foodle-hero-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: rgba(255,255,255,0.18);
	color: #fff;
	font-size: 1.1rem;
	backdrop-filter: blur(4px);
}
.tracking-wide { letter-spacing: 0.08em; }

/* ── Info card (jobboldali) ───────────────────────────────────────────── */
.foodle-info {
	background: linear-gradient(160deg, var(--foodle-dark) 0%, #1e293b 100%);
	color: #f8fafc;
	border-radius: 1rem;
}
.foodle-info h2,
.foodle-info p,
.foodle-info a {
	color: inherit;
}
.foodle-info a:hover {
	color: #fde047;
}

/* ── Generic kis vizuális javítások ───────────────────────────────────── */
.card {
	border-radius: 1rem;
}
.btn {
	border-radius: 0.625rem;
	font-weight: 500;
}
.btn-light {
	color: var(--foodle-primary-strong);
}
.btn-light:hover {
	background: #fff;
	color: var(--foodle-primary-strong);
}
.list-group-flush > .list-group-item {
	border-color: #e2e8f0;
	padding: 0.85rem 1.1rem;
}
hr {
	color: #cbd5e1;
}

/* ── Profile lista táblák ─────────────────────────────────────────────── */
.table.table-hover tbody tr:hover {
	background: #f8fafc;
}

/* ── Foodle response oldal (a JS-rendelte response táblázatokhoz) ──── */
#foodleResponse h1,
#foodleResponse h2 {
	letter-spacing: -0.01em;
}

/*
 * ── BS3 → BS5 shim ─────────────────────────────────────────────────────
 * A Foodle response template (templates/foodleresponse.html) még a régi
 * Bootstrap 3 névteret használja (panel, label, glyphicon, pull-right).
 * Ahelyett, hogy egy szuszra átírnánk az egészet, modern megjelenést
 * adunk ezeknek a class-oknak — így a felület BS5-szerű marad, anélkül,
 * hogy a JS templates-t át kéne dolgozni.
 */
.panel {
	border: 1px solid #e2e8f0;
	border-radius: 0.85rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	margin-bottom: 1rem;
	overflow: hidden;
}
.panel-heading {
	padding: 0.75rem 1.1rem;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
.panel-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	letter-spacing: -0.01em;
}
.panel-body {
	padding: 1rem 1.1rem;
}
.panel-default { /* BS3 default panel */ }

/* Régi UNINETT színek modern ekvivalenssel */
.uninett-color-lightBlue {
	background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
}
.uninett-color-orange {
	background: #fff7ed;
	color: #9a3412;
}
.uninett-color-white {
	background: transparent;
}
.uninett-padded { padding: 1rem; }

/* BS3 lebegtetés és btn-group / pull-right alignment */
.pull-right { float: right; }
.pull-left  { float: left; }

/* BS3 label → BS5 badge */
.label {
	display: inline-block;
	padding: 0.25em 0.55em;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: #94a3b8;
	border-radius: 0.4rem;
}
.label-warning { background-color: #f59e0b; color: #1e293b; }
.label-success { background-color: #10b981; }
.label-danger  { background-color: #ef4444; }
.label-info    { background-color: #0ea5e9; }
.label-primary { background-color: var(--foodle-primary); }

/* Régi glyphicon helyettesítő: a Bootstrap Icons-ot (bi) használjuk a HTML-ben,
   de a glyphicon-* class-os <span>-eket szimbolikusan üresen hagyjuk, hogy ne
   törje a layoutot. Ahol konkrét ikon kell, a JS templ. át kell írni `bi`-re. */
.glyphicon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.25em;
	vertical-align: -0.125em;
}

/* BS5 dropdown-toggle data-bs-toggle vs data-toggle (BS3) — adunk a régi
   data-toggle="dropdown"-nak is működést azzal, hogy az adatatribútumot
   átalakítjuk a HeaderBar / FoodleResponseController init-jénél (lásd JS). */

/* Régi BS3 col-md-* már van a BS5-ben is, csak más belső rendszer.
   Itt nincs különbség. */

/* "hidden-print" BS3 → BS5 print utility */
@media print {
	.hidden-print { display: none !important; }
}

/* BS3 jumbotron emulalva */
.jumbotron {
	padding: 2rem 2.25rem;
	margin-bottom: 1.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* Régi caret nyíl */
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.3em;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}