body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
#tl_navigation .tl_level_1_group .group-asc_directory {
    background: url(../../bundles/pinballleague/images/directory.svg) 0px 1px no-repeat;
    background-size: 16px 16px;
}

div.scoresheet table {
	border: solid 1px;
	border-collapse: collapse;
}

div.scoresheet table td, div.scoresheet table th {
	border: solid 1px;
	padding: 2px 4px;
}

div.scoresheet table thead td, div.scoresheet table thead th {
	text-align: center;
}

div.scoresheet table tbody .machine_points {
	text-align: center;
}

div.scoresheet table tbody .totals {
	text-align: center;
}

div.scoresheet table tbody .machine_score {
	text-align: right;
}

div.scoresheet table tr.duplicate td,
div.scoresheet table tr.duplicate th {
	background-color: #ffa3a3;
}

div.scoresheet table.duplicate {
	border-color: red;
}

/*
 * design-apollo — utilitarian dark theme for apollo.wwd-develop.com
 *
 * A basic, legible dark skin for the Contao 5.7 dev site running
 * contao-pinball-operations, contao-pinball-league and
 * contao-open-pinball-database. Utilitarian by intent: this exists to make the
 * working surfaces (tables, manager forms, navigation) readable during manual
 * testing. It is not a design system.
 *
 * Deployed to files/design-apollo/design-apollo.css and linked on the layout's
 * external CSS field, replacing the light starter sheet that contao-quick-setup
 * generates. See README.md.
 *
 * Contao core's layout.min.css / responsive.min.css still load ahead of this
 * file and keep providing utility classes such as .invisible (the skip link),
 * so those are deliberately not redefined here.
 *
 * Class-name note: the operations bundle's classes use a `po-` prefix. Until
 * 2026-09-05 they used `pm-`, left over from before the PinballManager ->
 * PinballOperations rename; contao-pinball-operations PR #25 finished that
 * rename, and its CssPrefixTest now forbids the old prefix coming back. The
 * seven selectors below moved with it.
 *
 * These two repos are coupled by those names alone, and a mismatch fails
 * SILENTLY -- an operations build older than PR #25 still emits the old prefix
 * and these rules simply do not apply, leaving the elements unstyled with no
 * error anywhere. If they look plain, check the bundle version first.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	/* Renders native form controls, scrollbars and default UI dark, which
	   removes the need to hand-style every native widget. */
	color-scheme: dark;

	--da-bg: #16181c;
	--da-surface: #1e2127;
	--da-surface-alt: #262a32;
	--da-border: #3a4049;

	--da-text: #e6e8eb;
	--da-muted: #a3acb7;

	--da-accent: #7ab0ff;
	--da-accent-hover: #a9caff;
	--da-focus: #ffc046;

	--da-success: #6ed49a;
	--da-danger: #ff8a8d;

	--da-radius: 3px;
	--da-space: 1rem;
	--da-maxwidth: 76rem;
}

/* ------------------------------------------------------------------ base -- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--da-bg);
	color: var(--da-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.5;
}

h1,
h2,
h3 {
	line-height: 1.25;
	margin: 1.5rem 0 0.5rem;
	font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 {
	font-size: 1.1rem;
	color: var(--da-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

p { margin: 0 0 var(--da-space); }

small { color: var(--da-muted); }

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

/* ---------------------------------------------------- links and focus ---- */

a {
	color: var(--da-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover,
a:focus { color: var(--da-accent-hover); }

/* Focus is never removed, only replaced with something clearly visible. */
:focus-visible {
	outline: 2px solid var(--da-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout -- */

#wrapper {
	max-width: var(--da-maxwidth);
	margin: 0 auto;
	padding: 0 var(--da-space);
}

#header .inside,
#main .inside {
	padding: var(--da-space) 0;
}

#header {
	border-bottom: 1px solid var(--da-border);
	margin-bottom: var(--da-space);
}

.mod_article { margin-bottom: 2rem; }

/* ------------------------------------------------------------ navigation -- */

.mod_navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Top level reads as a horizontal bar; deeper levels are plain indented
   lists. No JS dropdown behaviour is introduced. */
.mod_navigation ul.level_1 {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
}

.mod_navigation ul.level_2,
.mod_navigation ul.level_3 {
	margin-left: 0.9rem;
	padding-left: 0.6rem;
	border-left: 1px solid var(--da-border);
}

.mod_navigation ul.level_2 a,
.mod_navigation ul.level_3 a {
	font-size: 0.9rem;
	color: var(--da-muted);
}

.mod_navigation ul.level_2 a:hover,
.mod_navigation ul.level_3 a:hover { color: var(--da-accent-hover); }

.mod_navigation a {
	display: inline-block;
	padding: 0.15rem 0;
	text-decoration: none;
}

.mod_navigation a:hover { text-decoration: underline; }

.mod_navigation .active,
.mod_navigation a.active {
	color: var(--da-text);
	font-weight: 600;
}

/* ---------------------------------------------------------------- tables -- */

/*
 * The bundle templates emit a bare <table> with no wrapper element, and
 * changing their markup is out of scope, so wide tables are allowed to scroll
 * the page horizontally rather than being forced into a `display: block`
 * overflow container -- that hack breaks column sizing.
 */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--da-space);
	background: var(--da-surface);
}

caption {
	text-align: left;
	color: var(--da-muted);
	padding: 0.4rem 0;
}

th,
td {
	padding: 0.5rem 0.65rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--da-border);
}

thead th {
	background: var(--da-surface-alt);
	color: var(--da-text);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid var(--da-border);
}

tbody tr:nth-child(even) { background: var(--da-surface-alt); }

tbody tr:hover { background: #2c313a; }

td small { display: inline-block; margin-top: 0.15rem; }

/* ----------------------------------------------------------------- forms -- */

form { margin: 0 0 var(--da-space); }

label {
	display: block;
	margin: 0.75rem 0 0.2rem;
	font-weight: 600;
	color: var(--da-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
	width: 100%;
	max-width: 34rem;
	padding: 0.4rem 0.5rem;
	background: var(--da-surface);
	color: var(--da-text);
	border: 1px solid var(--da-border);
	border-radius: var(--da-radius);
	font: inherit;
}

textarea { min-height: 5rem; resize: vertical; }

input:disabled,
select:disabled,
textarea:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

button,
input[type="submit"] {
	padding: 0.4rem 0.85rem;
	background: var(--da-surface-alt);
	color: var(--da-text);
	border: 1px solid var(--da-border);
	border-radius: var(--da-radius);
	font: inherit;
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
	background: #323843;
	border-color: var(--da-accent);
}

/* ------------------------------------------------------- action classes -- */

/*
 * .po-inline-action / .po-inline-delete are <form> elements rendered INSIDE a
 * table cell, one per action. Without this they stack as blocks and every row
 * grows by a line per action button.
 */
.po-inline-action,
.po-inline-delete {
	display: inline-block;
	margin: 0 0.3rem 0 0;
}

.po-inline-delete button:hover {
	border-color: var(--da-danger);
	color: var(--da-danger);
}

.po-add {
	display: inline-block;
	margin-bottom: var(--da-space);
}

.po-title { font-weight: 600; }

/* -------------------------------------------------------- message states -- */

.po-denied,
.po-empty,
.po-success,
p.error,
.confirm {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--da-border);
	border-left-width: 3px;
	border-radius: var(--da-radius);
	background: var(--da-surface);
}

.po-empty {
	color: var(--da-muted);
	font-style: italic;
}

.po-denied,
p.error {
	color: var(--da-danger);
	border-left-color: var(--da-danger);
}

.po-success,
.confirm {
	color: var(--da-success);
	border-left-color: var(--da-success);
}

/* ------------------------------------------------------------ narrow ----- */

@media (max-width: 40rem) {
	th,
	td {
		padding: 0.4rem 0.45rem;
		font-size: 0.9rem;
	}

	.mod_navigation ul.level_1 { gap: 0.25rem 0.7rem; }
}