/* #region(collapsed) Reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
  }
}
/* #endregion */

@font-face {
	font-family: EuroPlate;
	src: url(eu-plate.ttf);
}

:root {
	--muted-background: light-dark(whitesmoke, rgb(22, 22, 22));
	--background: light-dark(white, rgb(31, 31, 31));

	--muted-text: light-dark(rgb(104, 104, 104), gray);

	--separator: light-dark(rgb(226, 226, 226), rgb(56, 56, 56));
	--selected: light-dark(rgb(0, 173, 226), rgb(0, 100, 167));
    --active: light-dark(rgb(178, 253, 178), rgb(12, 107, 12));
    --active-bg: color-mix(in srgb, var(--background), var(--active) 20%);

	--europe-blue: #039;

	--plate-border: light-dark(black, rgb(136, 136, 136));

	color-scheme: light dark;

	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	display: flex;
	flex-direction: column;

	margin-inline: auto;
	max-width: 60ch;

	background-color: var(--muted-background);
}

.titlebar {
	background-color: var(--background);
	display: flex;
	flex-flow: column;

	position: sticky;

	padding: 0.75em 1em;


	& .row {
		display: flex;
		align-items: center;
		justify-content: stretch;
		gap: 0.5em;
	}

	#license-number {
		flex-grow: 1;
		border: 3px solid var(--plate-border);
		border-right: none;
		border-radius: 0.75em 0 0 0.75em;

		padding: 0.25em 0.5em;

		font-size: 1.25rem;

		background: none;

		&:placeholder-shown {
			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		}

		&:focus-within {
			outline: none;
			border-color: var(--selected);
		}
	}

	#settings {
		color: currentColor;
	}

	#back {
		display: flex;
		color: currentColor;
		text-decoration: none;
	}

    #seen {
        background: none;
        border: thin solid var(--separator);
        padding: 0.25em 0.5em;

        #detail:has(.plate-item[data-seen]) & {
            background: var(--active-bg);
            border-color: var(--active);
        }
    }
}

#list {
    display: flex;
    flex-flow: column;
}

#list:not(.bottom) .titlebar {
    top: 0;
	border-bottom: thin solid var(--separator);
}

#list.bottom .titlebar {
    bottom: 0;
    order: 1;
	border-top: thin solid var(--separator);
}



#plate-list {
	list-style: none;
	padding: 0.5em 1em;
	margin: 0;
    min-height: 100vh;

	display: grid;
	grid-template-columns: max-content auto;
	gap: 0.5em;
	overflow: hidden;
    align-content: start;

	& > li {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;

		align-items: start;

		background-color: var(--background);
		padding: 0.5em;

        overflow: hidden;

		& > a {
			display: contents;
			color: currentColor;
		}

        &[data-seen] {
            background: var(--active-bg);
        }
	}
}


.license-plate {
	border: 3px solid var(--plate-border);
	border-right: none;
	border-radius: 0.75em 0 0 0.75em;
	overflow: hidden;

	display: flex;
	align-items: stretch;
	
	& .eu-emblem {
		background-color: var(--europe-blue);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		color: white;
		font-weight: 700;

		padding: 0.25em;
		line-height: 1;
		
		& img {
			width: 2ch;
		}
	}

	& .license-number {
		font-family: EuroPlate;
		margin: 0.125em 0.25em;

		font-size: 2rem;
	}
}

.plate-detail {
	display: flex;
	flex-direction: column;
	font-size: 85%;

    min-width: 0;

	/* & tr {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 0.5ch;
	}

	& td:nth-of-type(1) {
		display: block;
		font-size: 75%;
		font-variant: small-caps;
		color: var(--muted-text);
	}

	& td:nth-of-type(2) {
		white-space: pre-line;
	} */

    & em {
        font-weight: bold;
        font-style: normal;
    }
}

#detail .plate-item {
	margin-block: 0.5em;
	padding: 0.5em 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;

	background-color: var(--background);

	.plate-detail {
		gap: 0.5em;
	}
}

#settings {
	display: flex;
	flex-direction: column;
	margin-block: 0.5em;
	padding-inline: 1em;

	& > div {
		& > span:first-of-type {
			display: block;
			font-variant: small-caps;
		}

		& > textarea,
        & > input[type="text"] {
			width: 100%;

			background: none;
			border: thin solid var(--separator);
			resize: vertical;
			padding: 0.25em 0.5em;
		}
	}
}

.icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em;
    margin: 0;

    color: currentColor;
}

table {
    & tr {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 0.5ch;
	}

	& td:nth-of-type(1) {
		display: block;
		font-size: 75%;
		font-variant: small-caps;
		color: var(--muted-text);
	}

	& td:nth-of-type(2) {
		white-space: pre-line;
	}   
}

#datasources > ul {
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    list-style: none;
    padding: 0.5em 1em;
    margin: 0;
    font-size: 85%;
}

.datasource-detail {
    display: flex;
    gap: 0.5em;
    flex-flow: column;
    padding: 0.5em 1em;
    margin: 0;
    background: var(--background);

    & table a {
        text-decoration: none;
        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    }
}

hr {
    border: none;
    border-bottom: thin solid var(--separator);
    width: 100%;
}

#datasources .description {
    ul, ol {
        margin-block: 0.5em;
        padding-left: 1.5em;
    }

    p {
        margin-block: 0.5em;
    }
}