/* modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

*, ::before, ::after { 
	box-sizing: border-box;
	margin: 0; /* Remove the margin in all browsers. */
}

html { 
    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /* Improve consistency of default fonts in all browsers. */
	line-height: 1.15; /* Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* Use a more readable tab size. */
}

img, video, canvas, svg { /* Improve media defaults */
  	display: block;
  	max-width: 100%;
    height: auto; /* belangrijk omdat lazy loading een vaste width en height heeft */
    aspect-ratio: 3/2 auto;
}

iframe { 
	width: 100%; 
}

b, strong { 
    font-weight: bolder; /* Add the correct font weight in Chrome and Safari. */
}

code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* Improve consistency of default fonts in all browsers. */
	font-size: 1em; /* Correct the odd 'em' font sizing in all browsers. */
}

small {
	font-size: 80%; /* Add the correct font size in all browsers. */
}

sub, sup { /* Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

table {
	border-color: currentcolor; /* Correct table border color inheritance in Chrome and Safari. */
}

button, input, optgroup, select, textarea {
	font-family: inherit; /* Change the font styles in all browsers. */
	font-size: 100%; /* Change the font styles in all browsers. */
	line-height: 1.15; /* Change the font styles in all browsers. */
	margin: 0; /* Remove the margin in Firefox and Safari. */
	outline: none; /* Remove the black outline in Chrome. */
}

button, [type='button'], [type='reset'], [type='submit'] {
	-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
    appearance: button; /* Remove VSCode error */
}

legend {
	padding: 0; /* Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */
}

progress {
	vertical-align: baseline; /* Add the correct vertical alignment in Chrome and Firefox. */
    width: 100%;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
	height: auto; /* Correct the cursor style of increment and decrement buttons in Safari. */
}

[type='search'] {
	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
    appearance: textfield; /* Remove VSCode error */
	outline-offset: -2px; /* Correct the outline style in Safari. */
}

::-webkit-search-decoration {
	-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
}

::-webkit-file-upload-button {
	-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
	font: inherit; /* Change font properties to 'inherit' in Safari. */
}

summary {
	display: list-item; /* Add the correct display in Chrome and Safari. */
}

table {
	border-collapse: collapse; /* collapse table borders */
}

/* Add the right cursors */
button, [onclick] {	cursor: pointer; }
[draggable] { cursor: grab; }

a:has(button) { text-decoration: none; } /* Don't show link styles in button */

html {
	font-size: clamp(16px,4px + 2vw,22px);
	background-color: var(--bgcolor-pri);
	font-family: var(--font-pri);
	color: var(--fontcolor-main);
}

.font-xxs {	font-size: .4rem; }
.font-xs { font-size: .6rem; }
.font-sm { font-size: .8rem; }
.font-md { font-size: 1rem; }
.font-lg { font-size: 1.3rem; }
.font-xl { font-size: 1.6rem; }
.font-xxl {	font-size: 1.9rem; }
.font-uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }

.grid {
	display: grid;
}

.grid > * {
	z-index: 1;
	min-width: 0;
	min-height: 0;
}

.flex {
	display: flex;
	place-items: center;
	gap: 20px;
	flex-wrap: nowrap;
}

.flex.wrap {
	flex-wrap: wrap;
}

.img16 { width: 16px; }
.img24 { width: 24px; }
.color-pen { filter: var(--pen-color-filter);

}

[aria-disabled="true"], [disabled] {
	cursor: not-allowed;
	opacity: .1;
	pointer-events: none;
}

button {
    border: 2px solid transparent;
	background-color: var(--bgcolor-button);
	border-radius: 5px;
	padding: 2px 3px;
	&.days { 
		border-radius: 50%;
		font-size: .5rem;
		aspect-ratio: 1 / 1;
	}
	&.selected {
		background-color: var(--bgcolor-button-hover);
		color: #ffffff;
	}
	&.filled {
		border: 2px solid var(--pen-color);
	}
}

input, textarea { 
	border-color: color-mix(in srgb, var(--bgcolor-pri), black 5%);
	font-size: .8rem;
	color: var(--pen-color);
	border-radius: 5px;
	padding: 4px;
	background-color: color-mix(in srgb, var(--bgcolor-pri), white 20%);
	&:focus {
		outline: 1px solid var(--border-color);
	}
}

.sg-weekoverzicht {
    max-width: 900px;
    margin-inline: auto;
    width: 100dvw;
    height: 100dvh;
    padding: var(--screen-padding);
	grid-template-rows: auto 1fr;
	gap: 30px;
	> :nth-child(1){ /* opties */
		gap: 15px;
	}
	> :nth-child(2){
		gap: 10px;
		> div {
			overflow-y: hidden;
			grid-template-columns: auto 1fr;
			gap: 25px;
			&:not(:last-child){
				border-bottom: 2px solid var(--border-color);
				padding-bottom: 10px;
			}
			> :nth-child(1){ /* datum en iconen */
				gap: 10px;
				align-self: start;
			}
		}
	}
}

.sg-jaaroverzicht {
    max-width: 900px;
    margin-inline: auto;
    width: 100dvw;
    height: 100dvh;
    padding: var(--screen-padding);
	grid-template-rows: auto 1fr;
	gap: 30px;
	> :nth-child(1){ /* opties */
		gap: 15px;
	}
	> :nth-child(2){
		grid-template-columns: auto auto repeat(31,1fr);
		grid-template-rows: repeat(12,1fr);
		align-self: start;
		align-items: center;
		row-gap: 15px;
		column-gap: 3px;
		> div { 
			grid-column: span 33;
			grid-template-columns: subgrid; 
			align-items: center;
		}
	}
}

.sg-zoeken {
    max-width: 900px;
    margin-inline: auto;
    width: 100dvw;
    height: 100dvh;
    padding: var(--screen-padding);
	grid-template-rows: auto 1fr;
	gap: 30px;
	> :nth-child(1){ /* opties */
		gap: 15px;
	}
	> :nth-child(2){
		overflow-y: auto;
		> div {
			margin-bottom: 20px;
		}
	}
}

.sg-bladen {
    max-width: 900px;
    margin-inline: auto;
    width: 100dvw;
    height: 100dvh;
    padding: var(--screen-padding);
    grid-template-rows: 1fr 1fr;
    > :nth-child(1){ /* blad 1 */
        padding-bottom: var(--screen-padding);
        border-bottom: 2px solid var(--border-color);
    }
    > :nth-child(2){ /* blad 2 */
        padding-top: var(--screen-padding);
    }
}

.sg-blad {
	grid-template-rows: auto 1fr;
	gap: 20px;
	overflow: hidden;
	> :nth-child(1){ /* control balk */
		gap: 10px;
		align-items: center;
		> :nth-child(1){ /* opties */
			gap: 15px;
		}
		> :nth-child(2){ /* maanden */
			grid-template-columns: repeat(12,1fr);
			gap: 15px;
		}
		> :nth-child(3){ /* dagen */
			grid-template-columns: repeat(31,1fr);
			gap: 4px;
		}
	}
	> :nth-child(2){ /* notities balk */
		grid-template-columns: auto 1fr;
		align-items: start;
		> :nth-child(1){ /* weer en temperatuur/slaap */
			gap: 30px;
			> :nth-child(1){ /* weer scherm */
				gap: 8px;
				> :nth-child(3){
					gap: 10px;
				}
			}
			> :nth-child(2){ /* temperatuur scherm */
				gap: 8px;
				> :nth-child(3){
					gap: 10px;
				}
			}
			> :nth-child(3){ /* eten scherm */
				gap: 8px;
			}
		}
		> :nth-child(2){ /* notities */
			margin-left: 30px;
			height: 100%;
		}
	}
}


/* opslaan animatie border */
@property --bg-angle {
	inherits: false;
	initial-value: 0deg;
	syntax: "<angle>";
}

@keyframes spin {
	to { --bg-angle: 360deg; }
}

.opslaan-wachten {
	animation: spin 2s infinite linear;
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--bgcolor-pri), white 20%), color-mix(in srgb, var(--bgcolor-pri), white 20%)) padding-box,
		conic-gradient(from var(--bg-angle), #cfd5e2, red, #cfd5e2, #cfd5e2, #cfd5e2, #cfd5e2) border-box;
	border-color: transparent !important;
}

@keyframes flashgreen {
	from { box-shadow: 0 0 10px hsl(120, 100%, 38%); }
	to { box-shadow: 0 0 0px hsl(120, 100%, 38%); }
}

.opgeslagen {
	border-color: hsl(120, 100%, 38%) !important;
	animation: flashgreen .3s ease-in 1 !important;
}

a { 
	color: var(--fontcolor-main);
}

.input-error {
	font-size: 0.6rem;
	color: var(--color-error);
	margin-top: 3px;
	font-weight: bold;
}