/* The viewer is one viewport-high grid under the app bar and breadcrumb: the
 * XPath bar across the top, the sidebar down the left, and the diagram in a box
 * that scrolls on its own. It used to pin that chrome with `position: fixed` and
 * scroll the window under it, but the offsets assumed a fixed pre-Material
 * navbar. The Material app bar is in flow, so it scrolled away and the diagram
 * showed through the gap it left, while the sidebar sat over the footer
 * (ARMIP-260). In flow, the page scrolls only as far as the footer and the
 * chrome moves with it.
 *
 * Measured on the running page at 1920x1080: `.iata-top-app-bar` is 100px, the
 * breadcrumb 48px, and the XPath bar 33px (a 23px `input#xpath-input` plus its
 * 8px/2px padding). */
:root {
	--xsd-bar-top: 148px;                                        /* 100 + 48 */
	--xsd-bar-height: 33px;
	--xsd-content-top: calc(var(--xsd-bar-top) + var(--xsd-bar-height));
	--xsd-tools-height: 35px;                        /* Collapse all / Expand all */
	--xsd-annotation-height: 300px;
}

div.xsd-viewer {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	grid-template-rows: auto var(--xsd-tools-height) minmax(0, 1fr) var(--xsd-annotation-height);
	height: calc(100vh - var(--xsd-bar-top));
}

form#xpath-form {
	position: relative;
	grid-column: 1 / -1;
	background-color: white;
}

div.container {
	max-width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

input#xpath-input {
	width: calc(100% - 145px);
	height: 23px;
	font-family: 'Source Code Pro', monospace;
}

/* The one native text input left in the app, and so the one still carrying the
   browser's own focus ring -- a black double line in Chrome, nothing like the
   blue the rest of the app draws. The 23px height above is load-bearing (the
   fixed strips below this bar are pinned to offsets derived from it), so the
   ring is an outline rather than a border: a border would add 4px and push
   those offsets out of agreement. */
input#xpath-input:focus-visible {
	outline: var(--iata-focus-width) solid var(--iata-focus-color);
	outline-offset: 1px;
	border-radius: var(--iata-radius-form);
}

label#xpath-text {
	font-weight: bold;
	font-size: 22px;
	padding-left:  10px;
	padding-right: 10px;
	margin-left: 4px;
}

object#svg-object {
	user-select: none;
}

span#copy-link-btn:hover {
	cursor: pointer;
	opacity: 80%;
}

div#side-bar1 {
	grid-column: 1;
	grid-row: 3;
	overflow: auto;
	padding: 5px 8px 5px 8px;
	background-color: var(--iata-grey-95);
	border-bottom: 3px solid black;
}

div#side-bar1 p {
	font-size: 14px;
}

p#element_name {
	font-weight: bold;
	font-family: 'Source Code Pro', monospace;
}

p#first_type {
	font-family: 'Source Code Pro', monospace;
}

p#final_type {
	margin-top: -5px;
	font-family: 'Source Code Pro', monospace;
}

div#facets {
	padding-top: 5px;
	font-family: 'Source Code Pro', monospace;
	font-size: 14px;
}

div#facets ul {
	padding-left: 10px;
}

div.facet-name {
	font-weight: bold;
}

div.facet-value {
	padding-bottom: 5px;
}

div#key {
	padding-top: 5px;
	font-family: 'Source Code Pro', monospace;
	font-size: 14px;
}

div#key ul {
	padding-left: 10px;
}

div#key a {
	cursor: pointer;
	font-size: 13px;
}

div#keyref {
	padding-top: 5px;
	font-family: 'Source Code Pro', monospace;
	font-size: 14px;
}

div#keyref ul {
	padding-left: 10px;
}

div#keyref a {
	cursor: pointer;
	font-size: 13px;
}

.enum_tooltip {
  border-bottom: 1px dotted black;
}

.enum_tooltip .enum_tooltiptext {
  visibility: hidden;
  background-color: black;
  color: var(--iata-white);
  text-align: center;
  padding: 3px 8px 3px 8px;
  position: absolute;
  margin-top: 25px;
  left: 10px;
  width: 250px;
}

.enum_tooltip:hover .enum_tooltiptext {
  visibility: visible;
}

div#side-bar2 {
	grid-column: 1;
	grid-row: 4;
	padding: 5px 8px 5px 8px;
	background-color: var(--iata-grey-95);
}

div#side-bar2 p {
	font-size: 14px;
}

p#annotation-title {
	margin-bottom: 0px;
	font-weight: bold;
}

p#annotation {
	max-height: 275px;
	padding-bottom: 10px;
	overflow: auto;
}

div#side-bar3 {
	grid-column: 1;
	grid-row: 2;
	padding: 5px 8px 5px 8px;
	background-color: var(--iata-grey-95);
	font-size: 14px;
	border-bottom: 3px solid black;
}

div#side-bar3 ul {
	margin-left: 0.7em;
}

li.warning {
	color: red;
}

li.warning a {
	color: red;
	font-weight: bold;
}

/* The diagram scrolls here, not the window (ARMIP-260). z-index 0 keeps
   #loading and #instructions inside it (ARMIP-244). */
div#svg-container {
	position: relative;
	z-index: 0;
	grid-column: 2;
	grid-row: 2 / -1;
	overflow: auto;
}

div#collapse {
	display: inline-block;
	width: 47%;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
	margin-left: 3px;
	padding: 4px 0px 1px 0px;
	border: 1px solid black;
	transition: 0.2s;
}

div#collapse:hover {
	background-color: black;
	color: white;
	transition: 0.2s;
}

div#expand {
	display: inline-block;
	width: 47%;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
	padding: 4px 0px 1px 0px;
	border: 1px solid black;
	transition: 0.2s;
}

div#expand:hover {
	background-color: black;
	color: white;
	transition: 0.2s;
}

div#instructions-btn {
	position: absolute;
	top: 0px;
	right: 10px;
	display: inline-block;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 4px 4px 2px 4px;
	transition: 0.2s;
}

div#instructions-btn:hover {
	background-color: black;
	color: white;
	transition: 0.2s;
}

/* Confined to the diagram: a fixed, viewport-high curtain also lay over the
   #333 footer and washed it out to light grey (ARMIP-244). */
div#loading {
	position: absolute;
	inset: 0;
	background-color: white;
	opacity: 85%;
	z-index: 120;
}

div#loading p {
	margin: 20px 0px 0px 20px;
	width: 180px;
	text-align: center;
	padding: 10px 5px 5px 5px;
	background-color: black;
	color: white;
	font-size: 28px;
}

/* .iata-alert's display: flex would otherwise win over [hidden]. */
div#svg-load-error .iata-alert[hidden] {
	display: none;
}

div#svg-load-error .iata-alert {
	margin: 20px;
}

div#slow-loading {
	display: none;
	position: fixed;
	top: calc(var(--xsd-content-top) + 75px);
	left: 270px;
	opacity: 85%;
	z-index: 125;
}

div#slow-loading p {
	margin: 20px 0px 0px 20px;
	width: 400px;
	text-align: center;
	padding: 10px 5px 5px 5px;
	background-color: black;
	color: white;
	opacity: 100%;
	font-size: 16px;
}

/* Confined to the diagram like #loading (ARMIP-244); it scrolls on its own
   when the diagram is shorter than the list. */
div#instructions {
	display: none;
	position: absolute;
	inset: 0;
	overflow-y: auto;
	background-color: white;
	opacity: 90%;
	z-index: 110;
}

div#instructions-x {
	margin: 10px 0px 0px 10px;
	padding: 10px 0px 0px 0px;
	width: 60px;
	text-align: center;
	font-size: 36px;
	transition: 0.2s;
}

div#instructions-x:hover {
	background-color: black;
	color: white;
	cursor: pointer;
	transition: 0.2s;
}

div#instructions ul {
	padding: 10px 0px 0px 20px;
}