:root {
    --height-cover-small: 5rem;
    --font-family-1: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-family-2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media screen and (min-width: 1350px) {:root {--height-cover-small: 5rem;}}

*, html {
    box-sizing: border-box;
    font-family: var(--font-family-1);
    /* font-family: 'Stein', sans-serif; */
    /* font-family: "Overpass Mono", monospace; */
}
header *, h1, h2, nav *, footer *, h1 *, h2 * {font-family: var(--font-family-2);}
@media screen and (max-width: 799px) {html {font-size: 15px;}}
@media screen and (min-width: 800px) {html {font-size: 18px;}}
@media screen and (min-width: 1350px) {html {font-size: 20px;}}

::-webkit-scrollbar {width: var(--gap-side);}
::-webkit-scrollbar-track { border-radius: 0;}
::-webkit-scrollbar-thumb {background: hsl(var(--hsl-text), 0.5); border-radius: 0;}
/* [popover]::-webkit-scrollbar-thumb {background: hsl(var(--hsl-bg), 0.5);} */


/* 
=================
GENERAL HTML TAGS 
================= */

h1 a {color: hsl(var(--hsl-text));}
button, input[type="submit"], input[type="radio"], input[type="checkbox"], u[onclick], h1 > span {cursor: pointer;}
h1 {}
h1 small {font-size: 1.4rem; font-weight: 600;}
h2 small {font-weight: 400;}
h3 {font-size: 1.3rem;}
h4 {font-size: 1.1rem;  font-weight: 400;}
h5 {font-size: 1rem;}
fieldset, hr {border-color: hsl(var(--hsl-text), 0.5 ); border-width: 1px;}
hr {display: none;}
hr.strong {border-color: hsl(var(--hsl-text));}


/* 
==============
MAIN STRUCTURE 
============== */

body {
    display: flex;
    flex-direction: column;
    margin: 0 var(--gap-side);
    position: relative;
}

body>div.top-wrapper {
    background-color: hsl(var(--hsl-bg));
    z-index: 5000; /* voor als ik een sticky header wil*/
}
body>div.bottom-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

header {
    border-bottom: 1px solid hsl(var(--hsl-text));
    padding-bottom: 0.5rem;
    line-height: 1rem;
}
nav {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.4rem;
    background: hsl(var(--hsl-bg));
    padding: var(--gap-side) 0;
    border-bottom: 1px solid hsl(var(--hsl-text));
}

nav>ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--gap-small);

    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul + ul::before {content: "║"; margin: 0 var(--gap-small);}
nav li + li::before { content: "|"; margin: 0 var(--gap-small);}

nav li {

}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
footer {
    border-top: 1px solid hsl(var(--hsl-text));
}


/*
================
SERVER OVERVIEW 
================ */
.frame {
    border: 1px solid hsl(var(--hsl-text), 0.5 );
    padding: 0 var(--gap-side);
    background-color: hsl(var(--hsl-text), 0.05);
}

/* structure */
.overview>section  {
   /* margin: var(--gap-small) 0;  */
}

.overview>section.frame {
    border-top-width: 0px;
    border-color: hsl(var(--hsl-text));
}

article.server-item {
    display: flex;
    flex-direction: row-reverse; /* voorlopig toch voor alles zo proberen */
    
    width: 100%;
    gap: var(--gap-mini);
    padding: var(--gap-medium) 0;
}
article.server-item:not(:first-of-type) {
    border-top: 1px solid hsl(var(--hsl-text), 0.5 );
}

/* Cover */

article.server-item>.cover {
    max-width: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 1 0 auto; */
}

.cover {
    background-color: transparent;
}
.cover {
    background-color: hsl(var(--hsl-img-underlay));
    max-width: 100%;
}
article.server-item>div {
    height: var(--height-cover-small);
    display: flex;
}

article.server-item>div.content {
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    width: min-content;
    justify-content: center;
}

article.server-item div.one-line {
    line-height: 1.1rem;
    height: 1.4rem;
    display: inline-flex;
    flex-wrap: nowrap;
}

article.server-item div.content * {
    padding: 0;
    margin: 0;
}


article.server-item div.one-line>* {
    align-items: center; 
    text-overflow: ellipsis; 
    overflow: hidden;
    white-space: nowrap;
}

.what-who {
    font-size: 0.9rem;
}


article.server-item div.one-line>*:not(:last-of-type) {
    margin-right: var(--gap-small);
}

article.server-item div.two-line {
    height: calc((var(--height-cover-small) - (2 * 1.1rem)));
    line-height: calc((var(--height-cover-small) - (2 * 1.1rem)) / 2);
    font-size: 1rem;
    display: flex;
}
article.server-item div.two-line.center {
   align-items: center;  
}
article.server-item div.two-line>* {
    display: -webkit-box; /* Use a flexbox-like container */ 
    -webkit-box-orient: vertical; /* Make the box vertical */
    -webkit-line-clamp: 2;  
    align-items: center; 
    text-overflow: ellipsis; 
    overflow: hidden;
} 
article.server-item .what-who a {color: hsl(var(--hsl-text));}
article.server-item hr {display: none;}

/* ===EVENTS=== */
.week {
    border-top: 1px solid hsl(var(--hsl-text), 0.5);
}

.week h3 {
    background-color: hsl(var(--hsl-bg) );
    /* position: sticky; */
    top: 0;
    margin: 0;
    padding: var(--gap-medium) 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid hsl(var(--hsl-text), 0.5);
    z-index: 5000;
    font-weight: 400;
}

/* server items */
.events article.server-item, .profiles article.server-item {
    flex-direction: row-reverse;
}
/* filters */
.commandos {
    display: flex;
    flex-direction: column;
    padding: var(--gap-medium) 0;
    gap: var(--gap-medium);
    flex-wrap: wrap;
}

.commandos>div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-small);
}

.dropdown {
    width: fit-content;
}
.dropdown .select {
    border: 1px solid hsl(var(--hsl-text));
}
.dropdown .select.active {
    background-color: hsl(var(--hsl-link), 0.50);
}
.menu {
  border: 1px solid hsl(var(--hsl-text), 0.5 );
  padding: var(--gap-side);
  position: absolute;
  background: hsl(var(--hsl-bg));
}

.menu input[type="checkbox"] {
    margin-right: var(--gap-small);
}

/* ===PROFILES=== */
@media screen and (min-width: 1000px) {

    .frame {
        padding: 0;
        border: 1px solid hsl(var(--hsl-text), 0.5 );
        background-color: hsl(var(--hsl-text), 0.05);
    }

    .frame>*:not(.grid) {
        padding: 0 var(--gap-small);
    }

    .overview>section.frame {
        border-top-width: 0px;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-sizing: border-box;

    }
    .grid article.server-item {
        border-bottom: 1px solid hsl(var(--hsl-text), 0.5);
        border-right: 1px solid hsl(var(--hsl-text), 0.5);
    }

    .grid article.server-item {
        border: 1px solid hsl(var(--hsl-text), 0.5);
        padding: var(--gap-small) 0;
    }
    .grid article.server-item {      
        border-top: 0;
        border-left: 0;
    }
    .frame .grid article.server-item:nth-of-type(1), .frame .grid article.server-item:nth-of-type(2) {
        border-top: 1px solid hsl(var(--hsl-text), 0.5 );
    }
    .grid article.server-item:nth-of-type(odd) {
        border-left: 1px solid hsl(var(--hsl-text), 0.5 );
    }
    .grid article.server-item:nth-of-type(2) {
        border-top: 0;
    }
    *:not(.frame)>.grid article.server-item:nth-of-type(even) { /*.grid article.server-item:nth-of-type(3n) */
        border-right: 0;
    }
    *:not(.frame)>.grid article.server-item:nth-of-type(odd) { /*.grid article.server-item:nth-of-type(3n) */
        border-left: 0;
    }
    .frame .grid article.server-item:nth-of-type(odd) {
        border-left: 0;
        padding-left: var(--gap-small);
    }
    .frame .grid article.server-item:nth-of-type(even) {
        border-right: 0;
        padding-right: var(--gap-small);
    }
    .grid article.server-item:nth-of-type(even) {
        padding-left: var(--gap-side);
    }
    .grid article.server-item:nth-of-type(odd) {
        padding-right: var(--gap-side);
    } 

    .grid article.server-item:nth-last-of-type(1), .grid article.server-item:nth-last-of-type(2):not(:nth-of-type(even)) {
        border-bottom: 0;
    }
}


/* 
=======
SERVERS
======= */
.server>.cover-wrapper {
    margin: var(--gap-medium) 0;
    background-color: hsl(var(--hsl-bg));
    display: flex;
}


.server .cover {
    flex-flow: 1;
}


.server .cover figure>img {
    /* height: 100%;
    width: 100%; */
}



main.server div.content *:not(a):not(a *) {
    color: hsl(var(--hsl-text)) !important;
}

/* === EVENT SERVER === */
h2>span {
    border: 1px solid hsl(var(--hsl-text));
    border-right: 0;
    border-left: 0;
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    margin-right: 0.4rem;
}
h2>div.datetimes {
    display: flex;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    row-gap: var(--gap-small);
}
h2>div.datetimes>time {
    /* text-decoration: underline; pas nodig als je er op kunt klikken voor in uw agenda */
    cursor: pointer;
    text-decoration-thickness: 1px;
}

h2>div.datetimes>* {
    text-transform: lowercase;
    font-size: 1.2rem;
}

h2>div.datetimes>time:not(:last-of-type) {
    border-right: 2px solid hsl(var(--hsl-text));
    margin-right: var(--gap-small);
    padding-right: var(--gap-small);
}

h2>div.datetimes>time.past {
    text-decoration: none;
    pointer-events: none;
    color: hsl(var(--hsl-text), 0.5);
    border-color: hsl(var(--hsl-text), 0.5 );
}

/* === PROGRAM SERVER === */
span.past {
    color: hsl(var(--hsl-text), 0.5);
}

/* === ELEMENTS === */
section.elements div.title {

    gap: var(--gap-small);
    align-items: center;
}

div.title b {
    white-space: nowrap;
}

section.elements div.title form {
    display: contents;
} 

section.elements div>small {
    height: 0.9rem ;
}



/* 
========
POPOVERS
======== */

div.popover {
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    padding: var(--gap-small);
}

div.popover>.closing-button {
    position: absolute;
    top: 0;
    right: 0;
}

div.popover:has(figure) {
    background-color: hsl(var(--hsl-img-underlay));
    padding: 0;
}

div.popover:has(form) {width: 100%;}

.popover a {color: hsl(var(--hsl-bg));}
.popover hr {border-color: hsl(var(--hsl-bg));}

.popover input, .popover button, .popover textarea {
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    border: 1px solid hsl(var(--hsl-bg));  
}

div.popover>.closing-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(var(--hsl-text));
    background-color: hsl(var(--hsl-bg));
    border: 1px solid hsl(var(--hsl-text));
    height: 1.6rem;
    width: 1.6rem;
    aspect-ratio: 1/1;
    border-radius: 0.8rem;
    font-weight: 900;
    position: absolute;
    right: var(--gap-side);
    top: var(--gap-side);
    cursor: pointer;
    z-index: 9999;
    font-size: 0.6rem;
}
.popover>figure {
    padding: 0;
    margin: 0;
    border-color: hsl(var(--hsl-text));
}



/* 
===========
FORM FIELDS
=========== */

input, textarea, select, option, button, a.button, input[type="submit"], select, .select, .textarea{
    font-size: 1rem;
    background-color: hsl(var(--hsl-bg));
    color: hsl(var(--hsl-text));
    border-radius: 0;
    border: 1px solid hsl(var(--hsl-text));
    line-height: 1.6rem;
}

input::placeholder {color: hsl(var(--hsl-text), 0.5);}
input:focus, textarea:focus, .textarea:focus {outline-color: hsl(var(--hsl-link));}

button, a.button, input[type="submit"], input[type = "text"], input[type = "password"], input[type = "email"], input[type = "number"], input[type = "url"], select, .select {
    height: 1.6rem;
    padding: 0 var(--gap-mini);
}

form button[type="submit"] {
    width: auto;
    border: none;
}

button:disabled {
    pointer-events: none;
    background-color: hsl(var(--hsl-text), 0.1 );
    color: hsl(var(--hsl-text), 0.5 );
}

button.small {
    height: 1rem;
    font-size: 0.8rem;
    line-height: 0.5rem;
    align-self: center;
}

input[type = "text"], input[type = "password"], input[type = "email"], input[type = "url"], select {
    width: 100%;
    flex-grow: 1;
}

input[type = "radio"], input[type = "checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0.4rem 0;
    height: 0.8rem;
    width: 0.8rem;
    aspect-ratio: 1/1;
    accent-color: hsl(var(--hsl-link));
    background-color: hsl(var(--hsl-bg));
}

input[type = "radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: hsl(var(--hsl-link));
}

input[type="radio"]:checked {
  box-shadow: inset 0 0 0 0.1rem hsl(var(--hsl-bg));
}

input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 0.1rem hsl(var(--hsl-bg));
}

textarea {
    width: 100%;
    resize: vertical;
}

button, a.button, input[type="submit"]{
    text-decoration: none;
    background-color: hsl(var(--hsl-text), 0.20);
    color: hsl(var(--hsl-text));
    border: none;
    border-radius: 100px;
    padding: 0 0.4rem;
    white-space: nowrap;
}

/* === LOGIN FORM === */
form#login input {
    width: calc(200% / 5);
    margin-right: var(--gap-mini);
}

form#login button {
    width: calc(100% / 5);
    max-width: 3.2rem;
}

form fieldset {
    width: 100%;
    margin-bottom: var(--gap-medium);
    padding: var(--gap-small) var(--gap-small);
}


/*
=======
BUTTONS
======= */

button.active, a.active button {
    background-color: hsl(var(--hsl-link), 0.50);

}

a.button {
    display: inline-block;
    font-family: var(--font-family-content);
}

a:has(button.loading) {
   pointer-events: none; 
}
button.loading {
    background-color:  hsl(var(--hsl-text), 0.10);
    pointer-events: none;
}

/* 
======
LABELS
====== */

label {
    display: flex;
    margin-bottom: var(--gap-small);
    line-height: 1.6rem;
}

form.one-line {
    max-width: 33.33rem;
    width: 100%;
}

form.one-line>* {
    width: 100%;
}

form.one-line>div {
    display: inline-flex;
}

label {
    align-items: start;
}

label>label {
    margin-bottom: 0;
}

label:not(:has(*)) {
    overflow: hidden;
    text-overflow: ellipsis;
}

label>span {
    white-space: nowrap;
    /* margin-right: var(--gap-small); */
}

label>div {
    display: inline-grid;
    flex-grow: 1;
}

label>*:not(:last-child) {
    margin-right: var(--gap-small);
}

label:last-of-type {
    margin-bottom: 0;
}

progress {
    flex-grow: 1;
    height: 0.8rem;
    appearance: none;
}

progress::-webkit-progress-bar {
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.6rem;
}

progress::-webkit-progress-value {
    background-color: hsl(var(--hsl-link));
    border-radius: 1.6rem;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.1rem;
    background: transparent; /* important */
    border: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 1.1rem;
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.1rem;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: calc(1.1rem - 2px);
    width: calc(1.1rem - 2px);
    background: hsl(var(--hsl-link));
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-track { /* Firefox */
    height: 1.1rem;
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.1rem;
}

input[type="range"]::-moz-range-thumb {
    height: calc(1.1rem - 2px);
    width: calc(1.1rem - 2px);
    background: hsl(var(--hsl-link));
    border: none;
    border-radius: 50%;
    cursor: pointer;
}


/* 
======
TABLES
====== */

table {border-collapse: collapse;}

table.conversation {
    margin-bottom: 1rem;
}
table:not(table.conversation) {
    width: 100%;
    max-width: 40rem;
}

td:has(input[type="radio"]) {  
    width: 2rem;
}
td:not(:last-of-type) {
     /* keeps it as small as its content */
    padding-right: 0.4rem;
}
table:not(table.conversation) td:first-of-type {
    white-space: nowrap;
}

td.stretch-half {
   min-width: 50%;
   width: 60%;
}
td.stretch {
    width: 100%;
    min-width: 7rem;
    max-width: 50%;
}
td.stretch>label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

label progress {
    width: auto;
    min-width: 1.6rem;
}
table.cheat-table caption {
    font-size: 0.9rem;
    padding: var(--gap-small) 0;
    text-align: left;
}
table.cheat-table td, table.cheat-table th {
    border: 1px solid hsl(var(--hsl-text));
}

table.cheat-table tr>td:not(:first-of-type) {
    text-align: center;
}

table.cheat-table th:first-of-type {border-top: 0; border-left: 0;}

input[type="number"] {
    width: 5rem;
    text-align: right;
}


/* 
============
SERVER-PAGES
============ */

div.commands {
    gap: var(--gap-small);
    display: inline-flex;
}

div.add-elements, div.commands { /* button wrapper */
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

section.event-list {
    margin: var(--gap-medium) 0;
}


/* conversations */
section.mini-main {
    flex-grow: 1;
}


/* 
===========
TEXT-EDITOR
=========== */

.container {
	max-width: 100%;
	width: 100%;
	background: hsl(var(--hsl-bg));
	overflow: hidden;
}
.toolbar {
	padding: var(--gap-side) 0;
}
.toolbar .head {
	display: flex;
	grid-gap: var(--gap-small);
	margin-bottom: 300px;
	flex-wrap: wrap;
}
.toolbar  select {
    width: fit-content;
	background: hsl(var(--hsl-bg));
	border: 1px solid hsl(var(--hsl-text));
	outline: none;
	cursor: pointer;
}
.toolbar {
	display: flex;
    flex-direction: column;
	grid-gap: var(--gap-small);
}
.toolbar div {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: var(--gap-small);
}

.toolbar button {
	min-width: 1.6rem;
}
.textarea {
    border: 1px solid hsl(var(--hsl-text));
	padding: var(--gap-small);
    min-height: 30vh;
    overflow: auto;
    max-width: 100%;
}

font[size="1"] {font-size: 0.875rem;}
font[size="2"] {font-size: 1rem;}
font[size="3"] {font-size: 1.2rem;}
font[size="4"] {font-size: 1.4rem;}
font[size="5"] {font-size: 1.5rem;}


/* 
======
CREATE
====== */

fieldset:has(select:disabled) *:not(a):not(.not-cursive):not(.not-cursive *) {
    color: hsl(var(--hsl-text), 0.5 );
    border-color: hsl(var(--hsl-text), 0.5 );
    font-style: italic;
    
}

fieldset:has(:disabled) .not-cursive,
fieldset:has(:disabled) .not-cursive * {
    color: hsl(var(--hsl-text));
    border-color: hsl(var(--hsl-text));
    font-style: normal;
}