/* The "Tell us about this page" web form (route /report-an-error) in TER
   Learn's look: no Frappe navbar or footer, the portal's colors, cards and
   buttons, light and dark. web_include_css loads this on every
   website page, so every rule is scoped to that route. The colors are the
   portal's --ter-* values (lms frontend index.css). */
body[data-path^="report-an-error"] {
	--ter-page: #ffffff;
	--ter-card: #fdfcfa;
	--ter-cardline: #eec8c0;
	--ter-ink: #030712;
	--ter-meta: #5f5a55;
	--ter-red: #c03e28;
	--ter-btn: #c03e28;
	--ter-btnink: #fff8f2;
	min-height: 100vh;
	background: var(--ter-page);
	color: var(--ter-ink);
	font-family: InterVariable, InterVar, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="dark"] body[data-path^="report-an-error"] {
	--ter-page: #141414;
	--ter-card: #1e1b18;
	--ter-cardline: #352e27;
	--ter-ink: #f1ece6;
	--ter-meta: #ada398;
	--ter-red: #f0735a;
	color-scheme: dark;
}
html[data-theme="dark"]:has(body[data-path^="report-an-error"]) {
	background: #141414;
}

/* The plain "Home" bar, the account bubble and "Built on Frappe" made the
   page read as another site. The way back is the link
   report_form.js puts above the form. */
body[data-path^="report-an-error"] > .navbar,
body[data-path^="report-an-error"] .web-footer,
body[data-path^="report-an-error"] .page-breadcrumbs {
	display: none !important;
}

/* Frappe's "Not Saved" badge stays hidden. The form is prefilled from the
   lesson, so it showed before anything was typed, and the form keeps no
   drafts, so after typing it read as "save first?". Typed text still asks
   before it is dropped (report_form.js). */
body[data-path^="report-an-error"] #not-saved-badge {
	display: none !important;
}

/* One card around the head and the form. Frappe frames
   .web-form-header and .web-form as two boxes, and they met in a notch at
   the corners. The frame is drawn once here; Frappe's own rules on the two
   boxes are five classes deep, hence !important below. Its spacer divs
   would sit inside the card, so the margin takes their place. */
body[data-path^="report-an-error"] .web-form-container {
	max-width: 640px;
	margin: 1.5rem auto;
	padding: 0;
	background: var(--ter-card);
	border: 1px solid var(--ter-cardline);
	border-radius: 16px;
}
body[data-path^="report-an-error"] .web-form-container > div[style*="height"] {
	display: none;
}
body[data-path^="report-an-error"] .web-form-header,
body[data-path^="report-an-error"] .web-form {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
}
body[data-path^="report-an-error"] .web-form-head {
	border-bottom-color: var(--ter-cardline) !important;
}
body[data-path^="report-an-error"] .web-form-head h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ter-ink);
}
body[data-path^="report-an-error"] .web-form-introduction,
body[data-path^="report-an-error"] .ter-report-page,
body[data-path^="report-an-error"] .success-message {
	color: var(--ter-meta);
	font-size: 15px;
	line-height: 1.5;
}
body[data-path^="report-an-error"] .ter-report-page b {
	color: var(--ter-ink);
	font-weight: 600;
}
body[data-path^="report-an-error"] .ter-report-back {
	color: var(--ter-red) !important;
	text-decoration: none;
}
body[data-path^="report-an-error"] .ter-report-back:hover {
	text-decoration: underline;
}

body[data-path^="report-an-error"] .success-page {
	background: var(--ter-card);
	border: 1px solid var(--ter-cardline);
	border-radius: 16px;
	box-shadow: none;
}
/* The buttons sat right against the divider on phone. */
body[data-path^="report-an-error"] .web-form-footer {
	background: transparent;
	border-top: 1px solid var(--ter-cardline);
	padding-top: 16px;
}
body[data-path^="report-an-error"] .control-label,
body[data-path^="report-an-error"] .success-title {
	color: var(--ter-ink);
	font-weight: 500;
}
body[data-path^="report-an-error"] .help-box,
body[data-path^="report-an-error"] .text-muted {
	color: var(--ter-meta) !important;
}
body[data-path^="report-an-error"] .form-control {
	background: var(--ter-page);
	border: 1px solid var(--ter-cardline);
	border-radius: 10px;
	color: var(--ter-ink);
	box-shadow: none;
}
body[data-path^="report-an-error"] .form-control:focus {
	border-color: var(--ter-red);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ter-red) 25%, transparent);
}
/* Sent with the message empty: the box in red, the line under it
   --ter-red is set per theme above. */
body[data-path^="report-an-error"] .ter-report-invalid textarea,
body[data-path^="report-an-error"] .ter-report-invalid input,
body[data-path^="report-an-error"] .ter-report-invalid .ql-container {
	border-color: var(--ter-red) !important;
	box-shadow: 0 0 0 1px var(--ter-red);
}
/* The script focuses the marked box, and the focus rule above outranked
   the mark, so the box looked as on any focus. This
   one is more specific: the solid ring stays, the focus halo goes round it. */
body[data-path^="report-an-error"] .ter-report-invalid .form-control:focus {
	border-color: var(--ter-red);
	box-shadow: 0 0 0 1px var(--ter-red), 0 0 0 4px color-mix(in srgb, var(--ter-red) 25%, transparent);
}
body[data-path^="report-an-error"] .ter-report-message-error {
	margin: 6px 0 0;
	color: var(--ter-red);
	font-size: 13px;
	font-weight: 500;
}

/* Buttons as the portal's: red primary, outlined secondary. */
body[data-path^="report-an-error"] .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: none;
}
body[data-path^="report-an-error"] .btn-primary {
	background: var(--ter-btn) !important;
	border: 1px solid var(--ter-btn) !important;
	color: var(--ter-btnink) !important;
}
body[data-path^="report-an-error"] .btn-primary:hover {
	opacity: 0.9;
}
body[data-path^="report-an-error"] .btn-default {
	background: transparent !important;
	border: 1px solid var(--ter-cardline) !important;
	color: var(--ter-ink) !important;
}
body[data-path^="report-an-error"] .btn-default:hover {
	border-color: var(--ter-red) !important;
}
@media (max-width: 639px) {
	body[data-path^="report-an-error"] .btn {
		min-height: 44px;
	}
}

/* The confirm dialogs (Close and lose your text?, Discard changes?). On a
   web form page Frappe 16.50 draws frappe.ui.Dialog with the web modal of
   bootstrap-4-web.bundle.js: a .close button in the header, and the footer
   buttons as .btn.btn-sm.btn-secondary and .btn-primary es-buttons, not the
   desk's .btn-modal-* ones.
   Dark mode: every dialog on this page takes the card colors, so the body
   text is not light on white. That includes the
   ones Frappe's web form opens itself, such as the "Mandatory fields
   required" msgprint when Send is pressed too early; the
   page prefix keeps the rest of the site as it is. */
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-content {
	background: var(--ter-card) !important;
	border: 1px solid var(--ter-cardline) !important;
	color: var(--ter-ink) !important;
}
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-header,
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-body,
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-footer {
	background: var(--ter-card) !important;
	border-color: var(--ter-cardline) !important;
}
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-title,
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-body {
	color: var(--ter-ink) !important;
}
html[data-theme="dark"] body[data-path^="report-an-error"] .modal .modal-header .close {
	color: var(--ter-ink) !important;
	--icon-stroke: var(--ter-ink);
}
/* Keep writing, in both themes: the outlined secondary button of the form,
   as its own Discard. Only in the dialogs report_form.js opens, which it
   marks .ter-report-dialog; a msgprint's footer buttons stay Frappe's. The
   es-button's filled gray is in a cascade layer, so these unlayered rules
   win. */
body[data-path^="report-an-error"] .ter-report-dialog .modal-footer .btn-secondary,
body[data-path^="report-an-error"] .ter-report-dialog .modal-footer .btn-secondary:hover {
	background: transparent !important;
	border: 1px solid var(--ter-cardline) !important;
	color: var(--ter-ink) !important;
}
body[data-path^="report-an-error"] .ter-report-dialog .modal-footer .btn-secondary:hover {
	border-color: var(--ter-red) !important;
}