:root,
.blue {
    --bg1color: #004b96;
    --bg2color: #dbe4ef;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #afc5dd;
}

.red {
    --bg1color: #b22222;
    --bg2color: #f4dfdf;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #e7b9b9;
}

.green {
    --bg1color: #2e8b57;
    --bg2color: #e1eee6;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #bddac9;   
}

.orange {
    --bg1color: #ff6347;
    --bg2color: #ffe8e4;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #ffcdc5;    
}

.yellow {
    --bg1color: #ffd700;
    --bg2color: #fff9db;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #fff2af;
}

.gray,
.grey {
    --bg1color: #dfdfdf;
    --bg2color: #efefef;
    --bg3color: white;
    --fg1color: #bfbfbf;
    --fg2color: #efefef;
    --fg3color: #cfcfcf;   
}

.black {
    --bg1color: black;
    --bg2color: #dadada;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #aeaeae;    
}

.dimmed,
.inactive {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.7);
}

html {
    min-height: 100dvh;
    height: 100dvh;
    font-size: 100%;
    font-family: sans-serif;
    color: var(--fg1color);
    background-color: var(--bg3color);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

body * {
    box-sizing: border-box;
}

form {
    height: 100vh;
    min-height: 100vh;
}

main {
    padding: 0.5rem;
    background-color: var(--bg3color);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

not(.captcha) fieldset {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    justify-content: flex-start;
    font-size: 1.5rem;
    border-style: solid;
    border-radius: 0.5rem;
    color: var(--fg1color);
    border-color: var(--bg1color);
    border-width: 1px;
    background-color: var(--bg2color);
    margin-top: 1.25rem;
    padding: 0.5rem;
    gap: 0.5rem;
}

not(.captcha) fieldset.has(input[type='checkbox']) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.5rem;
}

not(.captcha) legend {
    color: var(--fg1color);
    position: absolute;
    width: 100%;
    top: -1.25rem;
    left: 0rem;
    font-size: 1rem;
    font-weight: bold;
}

not(.captcha) legend b {
    font-weight: lighter;
}

section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    border-style: solid;
    border-radius: 1rem;
    color: var(--fg1color);
    background-color: var(--bg3color);
    border-color: var(--bg1color);
    border-width: 2px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.125rem;
}

nav.right,
summary + nav {
    justify-content: flex-end;
}

nav input {
    -moz-appearance: textfield;
    text-align: right;
    padding: 0.25rem;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: lighter;
    height: 2rem;
    background-color: var(--bg2color);
    color: var(--fg1color);
    border-radius: 0.25rem;
    border: none;
}
 
nav > input::-webkit-outer-spin-button,
nav > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

nav a.button,
nav button {
    text-indent: 0;
    text-align: center;
    padding: 0 0.25rem;
    display: inline-block;
    text-overflow: clip;
    line-height: 2rem;
    min-width: 1.5rem;
    font-size: 1.2rem;
    height: 2rem;
    background-color: var(--bg1color);
    color: var(--fg2color);
    border-radius: 0.25rem;
}

label:has(input[type='file']),
a.button, 
button {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    all: unset;
    display: block;
    padding: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.5rem;
    height: 2.5rem;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    background-color: var(--bg1color);
    color: var(--fg2color);
    border-style: none;
    border-radius: 0.5rem;
}

button[hidden] {
    display: none;
}

label {
    display: flex;
    font-size: 1rem;
    font-weight: bold;
    color: var(--fg1color);
    flex-flow: column nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
}

label b {
    font-weight: lighter;
}

.captcha {
	display: flex;
  flex-wrap: wrap; /* Gör att de radbryts om det behövs */
  justify-content: center; /* Eller space-between */
  border: none; /* Valfritt, stilfråga */
}

.captcha label {
	display: flex;
	flex-direction: column; /* Input över img, eller vice versa */
	align-items: center;
	cursor: pointer;
	flex: 0 1 auto; /* Tillåt viss krympning/expansion */
	border: 4px solid var(--bg3color); /* fake borde , so that picture does not jump when selected */
}

/* Förslag från Clara (chatgpt): */
.captcha label:has(input:checked) {
  border-radius: 0.5rem; /* Valfritt för rundade hörn */
  border: 4px solid var(--bg1color);
}

.captcha legend {
	text-align: center;	
    font-weight: bold;
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='checkbox']),
label:has(input[type='radio']) {
    display: flex;
    vertical-align: middle;
    font-size: 1.5rem;
    color: var(--fg1color);
    height: 2.5rem;
    font-weight: bold;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='checkbox']),
label:has(input[type='radio']) {
    display: flex;
    vertical-align: middle;
    font-size: 1.5rem;
    color: var(--fg1color);
    height: 2.5rem;
    font-weight: bold;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='radio']:checked)::before {
    color: var(--bg1color);
    content: "\F518\00A0";
    font-family: "bootstrap-icons";
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='radio']:not(:checked))::before {
    color: var(--bg1color);
    content: "\F28A\00A0";
    font-family: "bootstrap-icons";
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='checkbox']:checked)::before {
    color: var(--bg1color);
    content: "\F26D\00A0";
    font-family: "bootstrap-icons";
}

/* Following should be written differently for login.php and reset.php */
label:has(input[type='checkbox']:not(:checked))::before {
    color: var(--bg1color);
    content: "\F584\00A0";
    font-family: "bootstrap-icons";
}

/*label * {*/
/*    width: 100%;*/
/*}*/

input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    font-size: 1.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    color: var(--fg1color);
    border: 1px solid var(--bg1color);
    background-color: var(--bg2color);
    padding: 0.1rem 0.5rem 0.05rem 0.5rem;
}

textarea {
   box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    font-size: 1.5rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    color: var(--fg1color);
    border: 1px solid var(--bg1color);
    background-color: var(--bg2color);
    padding: 0.1rem 0.5rem 0.05rem 0.5rem;
    resize: vertical;
}

input.placeholder-no-dim::placeholder {
  color: inherit; /* ärver från input */
  opacity: 1;     /* vissa webbläsare sänker annars */
}

input[type='date'] {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-min-logical-width: calc(100% - 1rem); /* Safari uses internal date control with fixed width. This fixes the problem. */
    -webkit-max-logical-height: calc(2.5rem); /* Safari uses internal date control with fixed width. This fixes the problem. */
    font-family: sans-serif;
    font-size: 1.5rem;
    height: 2.5rem;
}

input::-webkit-date-and-time-value {
    text-align: left; /* Safari uses internal date control with centerred text. This fixes the problem. */
    padding: 0.1rem 0 0 0;
    color: var(--fg1color) ; /* Safari uses internal date control with fixed/os-set color. This fixes the problem. */
}

input[type='checkbox'], 
input[type='radio'] {
    display: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[hidden] {
    display: none;
}

input[type='file'] {
    display: none;
}

details input,
fieldset input {
    background-color: var(--bg3color);
}

select {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    font-size: 1.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--bg1color);
    background-color: var(--bg2color);
    padding: 0.1rem 0.5rem 0.05rem 0.5rem;
    color: var(--fg1color);
}

details select,
fieldset select {
    background-color: var(--bg3color);
}

details {
    background-color: var(--bg2color);
    border-radius: 1rem;
    color: var(--fg1color);
}

details > *:not(:is(summary)) {
    margin: 0.5rem;
}

summary {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    padding: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.5rem;
    height: 2.5rem;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    background-color: var(--bg1color);
    color: var(--fg2color);
    border-style: none;
    border-radius: 0.5rem;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

details:not([open]) > summary .caret::before {
    content: "\F231";
    font-family: "bootstrap-icons";
    font-size: 80%;
    
}

details[open] > summary .caret::before {
    content: "\F229";
    font-family: "bootstrap-icons";
    font-size: 80%;
}

details:not([open]) > summary.caret::before {
    content: "\F231";
    font-family: "bootstrap-icons";
    font-size: 80%;
}

details[open] > summary.caret::before {
    content: "\F229";
    font-family: "bootstrap-icons";
    font-size: 80%;
}

details:not([open]) > .open,
details:not([open]) > summary .open{
    display: none;
}

details[open] > .closed,
details[open] > summary .closed {
    display: none;
}

/* span is used to group buttons or labels and flow them horizontally */

span:has(label) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.5rem;
}

span:has(label:has(input[type='radio'])) {
    background-color: green;
}

span label {
    flex: 1 1 3rem;
}

span label:has(input[type='radio']) {
    flex: 0 0 auto;
}

span:has(a.button),
span:has(button) {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
}

span a.button,
span button {
    flex: 0 1 auto;
    border-radius: 0;
    border-left: solid 1px var(--fg2color);
}

span a.button:first-child,
span button:first-child {
    flex: 1 1 auto;
    border-left: none;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

span a.button:last-chil,
span button:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

dl {
    margin: 0;
}

dt {
    font-weight: bold;
    text-decoration: underline;
}

dd {
    text-indent: 0;
    padding: 0;
    margin: 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

header {
    display: flex;
    column-gap: 0.5rem;
    background-color: var(--bg2color);
    border-top: 1px solid var(--bg1color);
    border-bottom: 1px solid var(--bg1color);
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    margin: 0 0 0.5rem 0;
    align-items: center;
}

.sandbox header {
    --bg1color: #ff6347;
    --bg2color: #ffe8e4;
    --bg3color: white;
    --fg1color: black;
    --fg2color: white;
    --fg3color: #ffcdc5;
}

header > a > img {
    transform: rotate(-10deg);
    height: 1.25rem;
}

.sandbox header > a > img {
    transform: none;;
    height: 2rem;
}

header > a {
    flex: 0 0 1.5rem;
}

header > div {
    flex: 1 1 auto;
    font-weight: bold;
    min-width: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

nav:has(menu) {
    position: relative;
}

menu {
    z-index: 1;
    display: flex;
    flex-direction: column;
    border-style: none;
    margin: 0;
    position: absolute;
    top: 100%;
    right: 0;
    padding: 0;
}

menu[hidden] {
    display: none;
}

menu menu {
    display: flex;
    flex-direction: column;
    border-style: none;
    position: static;
    margin: 0;
    padding: 0;
}

menu menu[hidden] {
    display: none;
}

nav menu button {
    text-align: left;
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: var(--bg3color);
    border-radius: 0;
}

nav > menu > button:first-of-type {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

nav > menu > button:last-of-type {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-style: solid;
}

menu menu > button {
    font-weight: normal;
    border-style: solid none none none;
    border-color: var(--bg1color);
    color: var(--bg1color);
    background-color: var(--bg3color);
}

menu menu > button:first-of-type {
    border-style: none;
    color: var(--bg1color);
    background-color: var(--bg3color);
}

footer {
    position: sticky;
    padding: 1rem;
    top: 100vh;
    display: flex;
}

footer * {
    margin: auto auto
}