/*
 * Appearance of the support site.
 *
 * The pages have no class and no doctype (quirks mode). They use old HTML attributes (bgcolor, border, <font>) and boxes with corner images.
 * Thus this file selects elements by tag, by attribute and by inline style. It changes only the appearance: no element is added or removed.
 * The pages keep quirks mode, because the table layouts depend on it.
 *
 * The font options of the options page (face, size) have no effect any more: the rules on <font> below replace them. The color option stays.
 */

:root {
	--page: #f3f4f6;
	--surface: #ffffff;
	--surface-alt: #f9fafb;
	--border: #e5e7eb;
	--border-strong: #d1d5db;
	--text: #1f2937;
	--muted: #6b7280;
	--primary: #2563eb;
	--primary-hover: #1d4ed8;
	--focus: #93c5fd;
	--radius: 8px;
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
}

html {
	background: var(--page);
}

body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 24px 32px;
	background: var(--page);
	color: var(--text);
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* In quirks mode, the tables do not inherit the font of the page. */
table {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* <font face='...' size='2'> is around most of the text: the page font replaces it. size='1' stays smaller. */
font[face] {
	font-family: inherit;
}
font[size='2'], font[size='3'] {
	font-size: inherit;
}
font[size='1'] {
	font-size: 12px;
	color: var(--muted);
}

a, a:visited {
	color: var(--primary);
	text-decoration: none;
}
a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 12px 0;
}

/*
 * Boxes with corner images: a table of three rows. The first and the last rows contain the corner images, the middle row contains the box.
 * The box becomes a card with rounded corners, and the image rows disappear.
 */
tr[style*='LINE-HEIGHT: 0'] {
	display: none;
}
img[src*='images/gray'] {
	display: none;
}
tr[style*='#f2f2f2'], tr[style*='#cccccc'] {
	background: transparent !important;
}
td[style*='border-left: solid #D6D6D6'], td[style*='border-right: solid #D6D6D6'], tr[style*='#cccccc'] > td[style*='#cccccc'] {
	border: 0 !important;
	background: transparent !important;
	width: 12px;
}
table:has(> tbody > tr > td > img[src*='images/graytopleft']) {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border-collapse: separate;
	margin: 8px auto;
}
table:has(> tbody > tr > td > img[src*='images/graytopleft']) > tbody > tr > td {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Tables with borders: the ticket list, the ticket, the users, the reports. The first row of a table with more rows is a header. */
table[border='1'] {
	border-collapse: collapse;
	border: 1px solid var(--border) !important;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
table[border='1'] > tbody > tr > td {
	border: 1px solid var(--border);
	padding: 6px 10px;
}
table[border='1'] > tbody > tr:first-child:not(:only-child) > td {
	background-color: var(--surface-alt);
	color: #374151;
}

/* Rows with a background color of the options (ticket list): white and light gray rows. */
table[border='1'] > tbody > tr[bgcolor] {
	background-color: var(--surface);
}
table[border='1'] > tbody > tr[bgcolor]:nth-child(odd) {
	background-color: var(--surface-alt);
}
table[border='1'] > tbody > tr[bgcolor]:hover {
	background-color: #eef2ff;
}

/* Gray headers and labels of the ticket page. The colors of the priority levels stay. */
tr[bgcolor='#EFEFEF'], td[bgcolor='#EFEFEF'] {
	background-color: var(--surface-alt);
}
tr[style*='border-top:1px solid'] {
	border-top: 1px solid var(--border) !important;
}
table[bgcolor='#f2f2f2'] {
	background: transparent;
}

/* Form fields. */
input[type='text'], input[type='password'], input:not([type]), select, textarea {
	font-family: inherit;
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	padding: 5px 8px;
	margin: 2px 0;
	box-shadow: inset 0 1px 1px rgba(16, 24, 40, 0.04);
}
select {
	padding: 4px 6px;
}
textarea {
	line-height: 1.45;
}
input[type='text']:focus, input[type='password']:focus, input:not([type]):focus, select:focus, textarea:focus {
	outline: 2px solid var(--focus);
	outline-offset: 0;
	border-color: var(--primary);
}
input[type='checkbox'], input[type='radio'] {
	accent-color: var(--primary);
}

/* Buttons: submit is the main action, reset and the file button are secondary. */
input[type='submit'], input[type='button'], button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var(--primary);
	border: 1px solid var(--primary);
	border-radius: 6px;
	padding: 6px 14px;
	margin: 2px 2px 2px 0;
	cursor: pointer;
}
input[type='submit']:hover, input[type='button']:hover, button:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
}
input[type='reset'], input[type='file']::file-selector-button {
	font-family: inherit;
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	padding: 6px 14px;
	margin: 2px 8px 2px 0;
	cursor: pointer;
}
input[type='reset']:hover, input[type='file']::file-selector-button:hover {
	background: var(--surface-alt);
}
input[type='file'] {
	min-width: 340px;
	max-width: 100%;
	font-family: inherit;
	font-size: 14px;
	color: var(--muted);
}

@media print {
	html, body {
		background: #ffffff;
	}
	body {
		max-width: none;
		padding: 0;
	}
	table:has(> tbody > tr > td > img[src*='images/graytopleft']), table[border='1'] {
		box-shadow: none;
	}
}