/* wsia_web viewer shell */

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #242628;
	color: #ddd;
	font-family: sans-serif;
}

#viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}

#viewport:active { cursor: grabbing; }

/* Backdrop and mask outlines are separate layers stacked at the same place, so
   the outlines stay lossless (PNG) while the tissue stays a compact JPEG, and
   toggling masks does not re-fetch the tissue. The gesture transform is applied
   to the wrapper so both move together. */
#stack {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}

#frame, #overlay {
	position: absolute;
	left: 0;
	top: 0;
	user-select: none;
}

/* Outlines are 1-px lines: never smooth them when the layer is scaled during a
   gesture, or they turn into the blur this layering exists to avoid. */
#overlay { image-rendering: pixelated; }

#panel {
	position: absolute;
	top: 0.6em;
	left: 0.6em;
	display: flex;
	gap: 0.8em;
	align-items: center;
	background: rgba(20, 22, 24, 0.8);
	padding: 0.4em 0.7em;
	border: 1px solid #555;
	border-radius: 4px;
}

#panel select {
	background: #333;
	color: #ddd;
	border: 1px solid #666;
	padding: 0.15em 0.3em;
}

#panel a { color: #9ad; text-decoration: none; }
#panel a:hover { text-decoration: underline; }

#image_info {
	display: flex;
	gap: 0.8em;
	font-size: 0.9em;
	white-space: nowrap;
}

#panel label {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.9em;
	cursor: pointer;
}
#panel label.disabled { color: #777; cursor: default; }

#status_line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	min-height: 2em;
	padding: 0.35em 0.7em;
	background: rgba(20, 22, 24, 0.8);
	border-top: 1px solid #555;
	pointer-events: none;
}

#status { color: #9ad; font-size: 0.85em; }

#minimap {
	position: absolute;
	top: 0.6em;
	right: 0.6em;
	border: 1px solid #555;
	background: #1a1c1e;
	line-height: 0;
}

#minimap_handle {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 1.8rem;
	padding: 0.25rem 0.5rem;
	background: #303336;
	color: #ddd;
	border: 0;
	border-bottom: 1px solid #555;
	font: inherit;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	cursor: grab;
	touch-action: none;
	user-select: none;
	white-space: nowrap;
}
#minimap_handle:active { cursor: grabbing; }
#minimap_handle:hover { background: #3a3e42; }
#minimap_handle:focus-visible {
	position: relative;
	outline: 2px solid #9abaff;
	outline-offset: -2px;
}

/* The backend renders the minimap at native pyramid resolution; constrain the
   displayed size here (the minirect math is client-size relative, so it tracks). */
#minimap img {
	display: block;
	width: 240px;
	height: auto;
	cursor: crosshair;
	touch-action: none;
}

#minirect {
	position: absolute;
	border: 2px solid #6cf;
	pointer-events: none;
}

/* Narrow screens (phones): the toolbar and a top-right minimap collide. Move
   the minimap to the bottom-right, out of the toolbar's strip, and shrink it;
   let the toolbar wrap so it never runs off-screen or under the minimap.
   The minirect is sized from the minimap's client size, so it tracks the new
   dimensions without JS changes. */
@media (max-width: 640px) {
	#minimap { top: auto; bottom: 2.6em; right: 0.6em; }
	#minimap_handle { white-space: normal; }
	#minimap img { width: 130px; }
	#panel {
		flex-wrap: wrap;
		max-width: calc(100vw - 1.2em);
		gap: 0.6em;
	}
	#image_info { flex-wrap: wrap; white-space: normal; }
}

/* --- chrome pages (login, slide list, DB View) --- */
body.chrome { overflow: auto; }

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6em 1em;
	background: #1a1c1e;
	border-bottom: 1px solid #444;
}
.topbar nav a { color: #9ad; margin-left: 1em; text-decoration: none; }
main { padding: 1em 1.4em; }

.login {
	max-width: 20em;
	margin: 12vh auto;
	padding: 2em;
	background: #1a1c1e;
	border: 1px solid #444;
	border-radius: 6px;
}
.login h1 { margin-top: 0; font-size: 1.3em; }
.login label { display: block; margin: 0.8em 0 0.2em; font-size: 0.9em; }
.login input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.4em;
	background: #2a2c2e;
	border: 1px solid #555;
	color: #ddd;
}
.login button, .tab {
	margin-top: 1.2em;
	padding: 0.5em 1em;
	background: #2d55b4;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.err { color: #e77; }
.muted { color: #888; }

ul.slides { list-style: none; padding: 0; max-width: 32em; }
ul.slides li { padding: 0.35em 0; border-bottom: 1px solid #333; }
ul.slides li.case {
	margin-top: 1em;
	color: #cc9;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #555;
}
ul.slides a { color: #9ad; text-decoration: none; }
ul.slides a:hover { text-decoration: underline; }

.tabs { display: flex; gap: 0.4em; margin-bottom: 1em; }
.tab { margin-top: 0; background: #333; }
.tab.active { background: #2d55b4; }

table.dbv { border-collapse: collapse; width: 100%; font-size: 0.9em; }
table.dbv th, table.dbv td {
	border: 1px solid #3a3c3e;
	padding: 0.3em 0.6em;
	text-align: left;
}
table.dbv th { background: #26282a; position: sticky; top: 0; }
table.dbv td.num, table.dbv th.num { text-align: right; }
table.dbv tr.dbv-alt td { background: #202224; }
table.dbv td.empty { color: #888; text-align: center; }

table.dbv th.dbv-sortable {
	cursor: pointer;
	padding-right: 1.8em;
	user-select: none;
}
table.dbv th.dbv-sortable::after {
	content: "↕";
	position: absolute;
	margin-left: 0.45em;
	color: #92979c;
	font-size: 0.85em;
}
table.dbv th.dbv-sortable.sort-asc::after { content: "▲"; color: #9abaff; }
table.dbv th.dbv-sortable.sort-desc::after { content: "▼"; color: #9abaff; }
table.dbv th.dbv-sortable:focus-visible,
.dbv-footer button:focus-visible,
.dbv-filter-dialog button:focus-visible,
.dbv-filter-dialog select:focus-visible,
.dbv-filter-dialog input:focus-visible {
	outline: 2px solid #9abaff;
	outline-offset: 2px;
}

/* Rows carrying a slide id are clickable: they open that slide/zone. */
table.dbv tr[data-wsi] { cursor: pointer; }
table.dbv tr[data-wsi]:hover td { background: #2d55b4; color: #fff; }
table.dbv tr.dbv-selected td {
	background: #554821;
	border-top-color: #e5bd58;
	border-bottom-color: #e5bd58;
}
table.dbv tr.dbv-selected td:first-child {
	box-shadow: inset 0.28em 0 #f0c35a;
}

.dbv-footer {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-bottom: 0.65em;
	min-height: 2.5em;
	color: #bbb;
}
.dbv-footer button,
.dbv-filter-dialog button,
.dbv-histogram-dialog button {
	padding: 0.45em 0.8em;
	background: #34373a;
	color: #eee;
	border: 1px solid #5a5e62;
	border-radius: 4px;
	cursor: pointer;
}
.dbv-footer button:hover,
.dbv-filter-dialog button:hover,
.dbv-histogram-dialog button:hover { background: #41454a; }
.dbv-filter-summary { margin-left: 0.15em; }

.dbv-filter-dialog {
	box-sizing: border-box;
	width: min(48rem, calc(100vw - 2em));
	max-height: calc(100vh - 2em);
	overflow: auto;
	padding: 1em;
	background: #202224;
	color: #ddd;
	border: 1px solid #5a5e62;
	border-radius: 6px;
	color-scheme: dark;
}
.dbv-filter-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dbv-dialog-heading,
.dbv-dialog-actions,
.dbv-filter-rule-controls,
.dbv-member-toolbar {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.dbv-dialog-heading {
	justify-content: space-between;
	margin-bottom: 1em;
}
.dbv-dialog-heading h2 { margin: 0; font-size: 1.2em; font-weight: 500; }
.dbv-dialog-close {
	min-width: 2.35em;
	font-size: 1.1em;
}
.dbv-filter-rules > .muted { margin: 0 0 1em; }
.dbv-filter-rule {
	margin-bottom: 0.8em;
	padding: 0.8em;
	background: #292b2e;
	border: 1px solid #44484c;
	border-radius: 4px;
}
.dbv-filter-rule-controls select:first-child { flex: 1; min-width: 8em; }
.dbv-filter-dialog select,
.dbv-filter-dialog input[type="search"] {
	box-sizing: border-box;
	min-height: 2.35em;
	padding: 0.35em 0.5em;
	background: #181a1c;
	color: #eee;
	border: 1px solid #5a5e62;
	border-radius: 3px;
}
.dbv-filter-editor { margin-top: 0.65em; }
.dbv-filter-value { width: 100%; }
.dbv-member-toolbar input { flex: 1; min-width: 8em; }
.dbv-member-summary { white-space: nowrap; color: #bbb; }
.dbv-member-values {
	max-height: 14em;
	overflow: auto;
	margin-top: 0.5em;
	padding: 0.25em;
	background: #181a1c;
	border: 1px solid #45494d;
	border-radius: 3px;
}
.dbv-member-values label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.45em;
	cursor: pointer;
}
.dbv-member-values label:hover { background: #30343a; }
.dbv-member-values label.selected span { font-weight: 700; }
.dbv-member-values label[hidden] { display: none; }
.dbv-filter-error { min-height: 1.4em; margin: 0.5em 0; color: #f08888; }
.dbv-dialog-actions { margin-top: 0.5em; }
.dbv-dialog-spacer { flex: 1; }
.dbv-filter-dialog button.primary {
	background: #2d55b4;
	border-color: #5174ca;
}
.dbv-filter-dialog button.primary:hover { background: #3764c8; }

/* Server-authoritative Histogram. The layout follows the desktop control
   order but wraps naturally on narrow browser windows. */
.dbv-histogram-dialog {
	box-sizing: border-box;
	width: min(72rem, calc(100vw - 2em));
	max-height: calc(100vh - 2em);
	overflow: auto;
	padding: 1em;
	background: #202224;
	color: #ddd;
	border: 1px solid #5a5e62;
	border-radius: 6px;
	color-scheme: dark;
}
.dbv-histogram-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dbv-histogram-source-row,
.dbv-histogram-edits,
.dbv-histogram-controls {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
}
.dbv-histogram-source-row { margin-bottom: 0.6em; }
.dbv-histogram-source-row > label,
.dbv-histogram-edits label,
.dbv-histogram-controls label {
	display: flex;
	align-items: center;
	gap: 0.4em;
	white-space: nowrap;
}
.dbv-histogram-source-row select,
.dbv-histogram-controls select,
.dbv-histogram-edits input {
	box-sizing: border-box;
	min-height: 2.35em;
	padding: 0.35em 0.5em;
	background: #181a1c;
	color: #eee;
	border: 1px solid #5a5e62;
	border-radius: 3px;
}
.dbv-histogram-column { min-width: 12em; }
.dbv-histogram-fit-summary {
	min-width: 18em;
	min-height: 1.5em;
	overflow-x: auto;
	color: #ddd;
}
.dbv-histogram-fit-summary table { border-collapse: collapse; }
.dbv-histogram-fit-summary th {
	padding-right: 1em;
	font-weight: 400;
	text-align: left;
}
.dbv-histogram-fit-summary td {
	padding-right: 2.5em;
	white-space: nowrap;
}
.dbv-histogram-fit-summary td.dbv-histogram-valley {
	padding-right: 2.5em;
	color: #bbb;
}
.dbv-histogram-stats {
	min-height: 3em;
	margin: 0.3em 0 0.5em;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.9em;
	line-height: 1.5;
	overflow-x: auto;
	white-space: nowrap;
}
.dbv-histogram-canvas {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: min(42vh, 24rem);
	min-height: 12rem;
	background: #181a1c;
	border: 1px solid #4d5258;
	border-radius: 3px;
	touch-action: none;
	cursor: crosshair;
}
.dbv-histogram-edits { margin-top: 0.75em; }
.dbv-histogram-edits input { width: 9em; }
.dbv-histogram-controls { margin-top: 0.75em; }
.dbv-histogram-controls .dbv-dialog-spacer { flex: 1 1 1em; }
.dbv-histogram-dialog button.primary {
	background: #2d55b4;
	border-color: #5174ca;
}
.dbv-histogram-dialog button.primary:hover { background: #3764c8; }
.dbv-histogram-status {
	min-height: 1.4em;
	margin-top: 0.5em;
	color: #9abaff;
}
.dbv-histogram-dialog button:focus-visible,
.dbv-histogram-dialog select:focus-visible,
.dbv-histogram-dialog input:focus-visible,
.dbv-histogram-canvas:focus-visible {
	outline: 2px solid #9abaff;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.tabs { overflow-x: auto; }
	.dbv-filter-rule-controls { align-items: stretch; flex-direction: column; }
	.dbv-filter-rule-controls select:first-child { min-width: 0; }
	.dbv-member-toolbar { align-items: stretch; flex-wrap: wrap; }
	.dbv-member-toolbar input { flex-basis: 100%; }
	.dbv-dialog-actions { flex-wrap: wrap; }
	.dbv-histogram-dialog { width: calc(100vw - 1em); padding: 0.75em; }
	.dbv-histogram-source-row,
	.dbv-histogram-edits,
	.dbv-histogram-controls { align-items: stretch; flex-direction: column; }
	.dbv-histogram-source-row > label,
	.dbv-histogram-edits label,
	.dbv-histogram-controls label { justify-content: space-between; }
	.dbv-histogram-column,
	.dbv-histogram-edits input { width: 100%; min-width: 0; }
	.dbv-histogram-controls .dbv-dialog-spacer { display: none; }
}