/* Netticket split-screen layout for public ticket pages */
html {
	height: 100%;
	min-height: 100%;
}

body.publicnewticketform {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body.publicnewticketform::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 55%;
	height: 100vh;
	background: url('/custom/netticket/img/login_background.jpg?v=1790158700') center/cover no-repeat;
	z-index: 0;
}

body.publicnewticketform .publicnewticketform2 {
	position: relative;
	z-index: 1;
	margin-left: 55%;
	width: 45%;
	min-height: 100vh !important;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 40px 40px 60px;
	box-sizing: border-box;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
	overflow-y: auto;
}

body.publicnewticketform .publicnewticketform2 > footer.center {
	display: none;
}

/* Standard header of public pages (company logo, topic) is replaced by the logo of the setup of the module */
body.publicnewticketform .publicnewticketform2 > header.center {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	max-width: 437px;
	max-height: 202px;
	aspect-ratio: 437 / 202;
	margin-bottom: 24px;
	background: url('/custom/netticket/img/logo_netlogic.png?v=1790159474') center/contain no-repeat;
}

body.publicnewticketform .publicnewticketform2 > header.center > * {
	display: none;
}

/* Core theme adds margins of 15% and paddings of 50px (.ticketlargemargin): with width 100% this overflows
   the column, so paddings are included in the width (440px of content) and margins are removed */
body.publicnewticketform .ticketpublicarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 540px;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

.ticketpublicarea > p {
	color: #555;
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 32px;
}

.ticketform {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ticketform a.butAction {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	text-decoration: none;
}

div.ticketform .index_create,
div.ticketform .index_display {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: auto;
	min-height: unset;
	padding: 18px 24px;
	margin: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #2c6fbb 0%, #1e4e85 100%);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	text-transform: none;
	text-align: left;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

div.ticketform .index_create:hover,
div.ticketform .index_display:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

div.ticketform .index_create br,
div.ticketform .index_display br {
	display: none;
}

div.ticketform .index_create .btnTitle-icon,
div.ticketform .index_display .btnTitle-icon,
div.ticketform .index_create img,
div.ticketform .index_display img {
	font-size: 1.4rem;
	margin-bottom: 0;
	flex: 0 0 auto;
}

#form_create_ticket, #form_view_ticket {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	padding: 2em;
	margin: 20px auto;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

@media only screen and (max-width: 900px) {
	body.publicnewticketform::before {
		display: none;
	}
	body.publicnewticketform .publicnewticketform2 {
		margin-left: 0;
		width: 100%;
		padding: 24px 20px;
	}
}

/* --- Netticket layout: keep actions visible, fullscreen create page --- */

body.publicnewticketform {
	overflow: hidden;
}

body.publicnewticketform .publicnewticketform2 {
	height: 100vh;
	overflow-y: auto;
}

body.publicnewticketform .ticketpublicarea,
body.publicnewticketform .ticketpublicarealist {
	flex: 0 0 auto;
	margin-top: auto;
	margin-bottom: auto;
}

/* Home page (index.php, the only one with .ticketform): logo and buttons are centered together */
body.publicnewticketform:has(.ticketform) .publicnewticketform2 > header.center {
	margin-top: auto;
}

body.publicnewticketform:has(.ticketform) .ticketpublicarea {
	margin-top: 0;
}

body.publicnewticketform .ticketpublicarea > p {
	margin-bottom: 24px;
}

/* Fullscreen variant for the create ticket page (create_ticket.php, identified by its form): faint image as background */
body.publicnewticketform:has(#form_create_ticket) {
	background: #ffffff;
}

body.publicnewticketform:has(#form_create_ticket)::before {
	width: 100%;
	opacity: 0.07;
}

body.publicnewticketform:has(#form_create_ticket) .publicnewticketform2 {
	margin-left: 0;
	width: 100%;
	background: transparent;
	box-shadow: none;
}

body.publicnewticketform:has(#form_create_ticket) .ticketpublicarea {
	max-width: 1060px;
}

/* Compact layout when viewport height is small (high zoom levels, phones in landscape).
   Not in portrait: small phones (iPhone SE: 667px) have room for the logo since the page scrolls */
@media only screen and (max-height: 720px) and (orientation: landscape) {
	body.publicnewticketform .ticketlargemargin {
		padding: 8px 16px;
	}
	body.publicnewticketform .publicnewticketform2 > header.center {
		height: 56px;
		margin-bottom: 12px;
	}
	body.publicnewticketform .ticketpublicarea > p {
		margin-bottom: 14px;
		font-size: 0.9rem;
		line-height: 1.3;
	}
	.ticketform {
		gap: 10px;
	}
	div.ticketform .index_create,
	div.ticketform .index_display {
		padding: 12px 20px;
		min-height: unset;
		font-size: 0.95rem;
	}
	body.publicnewticketform .ticketpublicarea br {
		display: none;
	}
}

@media only screen and (max-height: 520px) and (orientation: landscape) {
	body.publicnewticketform .publicnewticketform2 > header.center {
		height: 40px;
		margin-bottom: 8px;
	}
	body.publicnewticketform .ticketpublicarea > p {
		display: none;
	}
	div.ticketform .index_create,
	div.ticketform .index_display {
		padding: 10px 16px;
		font-size: 0.9rem;
	}
}

/* --- Phones and tablets --- */

@media only screen and (max-width: 900px) {
	/* The whole page scrolls instead of the column: the browser toolbar can collapse, and on iOS
	   100vh is taller than the visible area when the toolbar is shown (the bottom would be hidden) */
	body.publicnewticketform {
		overflow: visible;
	}
	body.publicnewticketform .publicnewticketform2 {
		height: auto;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		overflow-y: visible;
	}

	/* Font size of 16px at least: iOS zooms into the page when a field with a smaller font gets the focus */
	body.publicnewticketform input:not([type=hidden]),
	body.publicnewticketform select,
	body.publicnewticketform textarea,
	body.publicnewticketform .select2-selection {
		font-size: 16px;
	}

	/* Touch targets of 44px high (some inputs have no type attribute, so they are selected by exclusion) */
	body.publicnewticketform input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
	body.publicnewticketform button,
	body.publicnewticketform select {
		min-height: 44px;
		box-sizing: border-box;
	}
	body.publicnewticketform .select2-container .select2-selection--single {
		height: 44px;
	}
	body.publicnewticketform .select2-container .select2-selection--single .select2-selection__rendered {
		line-height: 42px;
	}
	body.publicnewticketform .select2-container .select2-selection--single .select2-selection__arrow {
		height: 42px;
	}
}

@media only screen and (max-width: 600px) {
	/* Create ticket form: labels above fields instead of a 2 columns table, fields use the full width */
	body.publicnewticketform #form_create_ticket {
		padding: 16px;
		border-radius: 12px;
	}
	body.publicnewticketform #form_create_ticket table,
	body.publicnewticketform #form_create_ticket tbody,
	body.publicnewticketform #form_create_ticket tr,
	body.publicnewticketform #form_create_ticket td {
		display: block;
		width: 100% !important;
		height: auto !important; /* eldy forces 40px !important on rows and cells of table.border on phones */
		box-sizing: border-box;
	}
	body.publicnewticketform #form_create_ticket td {
		padding: 0;
		text-align: left;
	}
	body.publicnewticketform #form_create_ticket tr {
		margin-bottom: 14px;
	}
	body.publicnewticketform #form_create_ticket td:first-child:not(:only-child) {
		padding-bottom: 4px;
	}
	body.publicnewticketform #form_create_ticket input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not(.button),
	body.publicnewticketform #form_create_ticket select,
	body.publicnewticketform #form_create_ticket textarea,
	body.publicnewticketform #form_create_ticket .select2-container,
	body.publicnewticketform #form_create_ticket .cke {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}