/* === Global settings === */
:root 
{
  --background: #333333;
  --foreground: #4D4D4D;
  --attention: #666666;
  --text: white;
  --highlight: #808080;
  --separation: 0.2em;
  --fontsize: calc(min(3vw, 3vh));
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--foreground);
  border-radius: var(--separation);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--highlight);
}

html, body 
{
  height: 100%;
  margin: 0;
  color: var(--text);
  font-size: var(--fontsize);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  user-select: none;
}

p, pre, ul
{
  margin: 0;
}

.preformatted {
  white-space: pre-wrap;
}

ul
{
  padding: 0;
}

body 
{
  background-color: black;
}


/* === Main display settings === */
#main 
{
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}


/* === Selector settings === */
#selectors 
{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0 0 0 var(--separation);
}

#selectors > span 
{
  background-color: var(--background);
  max-width: 10em;
  padding-left: var(--separation);
  padding-right: var(--separation);
  padding-top: calc(0.5 * var(--separation));
  padding-bottom: calc(0.5 * var(--separation));
  border-radius: calc(2*var(--separation)) calc(2*var(--separation)) 0 0;
  margin-right: var(--separation);
  margin-top: var(--separation);
  flex-grow: 1;
  text-align: center;
}

.selected 
{
  background-color: var(--highlight) !important;
}

/* === Checkbox settings === */
.kruis
{
  filter: invert(10%) sepia(58%) saturate(7184%) hue-rotate(14deg) brightness(80%) contrast(119%);
}

.vink
{
  filter: invert(19%) sepia(78%) saturate(6188%) hue-rotate(121deg) brightness(97%) contrast(103%);
}

/* === Modal settings === */
.modal-mask
/* Make the whole screen a bit darker using an black alpha color */
{
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
}

.modal-wrapper
/* Match the height of the mask */
{
  height: 100%;
  display: flex;
}

.modal-container
/* Decorated centered box */
{
  width: 40%;
  margin: auto;
  padding: var(--separation) var(--separation);
  background-color: var(--foreground);
  border-radius: calc(2*var(--separation));
  border-style: groove;
  border-color: var(--highlight);
}

.modal-default-header
/* Decorated bold header with a little bit of separation to the body */
{
  margin-bottom: calc(2*var(--separation));
  border-bottom: calc(var(--separation)) solid var(--background);
  border-radius: calc(2*var(--separation));
  text-align: center;
  font-weight: bold;
}

.modal-default-body
{
  margin-left: var(--separation);
  margin-right: var(--separation);
}

.modal-default-footer
/* Allow the button to flow to the right without float. Add little bit of separation
between the body and the footer */
{
  display: flex;
  flex-direction: row-reverse;
  margin-top: calc(2*var(--separation));
}

.modal-default-button
/* Button aligned to the right. */
{
  background-color: var(--attention);
}


/* === Streeplijst settings === */
#streeplijst 
{
  display: flex;
  height: 0;
  flex-direction: column;
  background-color: var(--background);
  margin: 0;
  flex-grow: 1;
}

#streeplijst > div {
    flex-basis: 0;
}

#persons, #drinks, #orders 
/* 3 columns that are separated */
{
  display: flex;
  flex-direction: column;
  margin: calc(3*var(--separation));
}

.person, .drink, #overview, #order-container 
/* We want the content of the three rows to look similar */
{
  margin: calc(0.5 * var(--separation));
  padding: var(--separation);
  padding-left: calc(3 * var(--separation));
  background-color: var(--foreground);
  overflow-x: hidden;
  flex-shrink: 0;
}

#persons, #drinks, #stock
/* Make column static height in portrait mode */
{
  flex-shrink: 0;
  overflow-y: scroll;
}

#persons
/* Set the heigth of the persons column */
{
  flex-grow: 24;
  min-width: 20%;
}

#drinks
/* Set the heigth of the persons column */
{
  flex-grow: 16;
  min-width: 20%;
}

#order-container 
/* Make the orders fill the remaining height */
{
  flex-grow: 1;
  flex-basis: 0;
  overflow: scroll;
}


/* === Order settings === */ 
#orders 
/* The orders should take the remaining space */
{
    flex-grow: 40;
    height: 0;
}

.order 
/* Orders should be separated by a small line */
{
  padding-bottom: var(--separation);
  border-bottom: solid var(--background) calc(0.2 * var(--separation));
}

.suborder 
/* A suborder should be indented */
{
  padding-left: calc(5 * var(--separation));
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.ordername
/* The ordername should have some room above */
{
  padding-top: var(--separation);
}

.suborder > div 
/* Make all elements scale the same amount */
{
  flex-grow: 1;
  flex-basis: 0;
}

.name 
/* Exception: the name should align left and grow more */
{
  flex-grow: 10 !important;
  margin-right: auto;
}

.subtotal
/* Exception: The subtotal should get extra room for bigger numbers */
{
  flex-basis: 4em !important;
}

.value
/* Exception: The value should get extra room for bigger numbers */
{
  flex-basis: 1em !important;
}

.value, .del, .subtotal, .plus, .minus
/* All elements except the name should have constant separation and look */
{
  margin-left: var(--separation);
  padding: var(--separation);
  text-align: center;
}

.icon
{
  margin-left: var(--separation);
  height: 1em;
  width: auto;
}

.value, .del, .plus, .minus
/* The buttons should have a different background */
{
  background: var(--background);
}

.del 
/* Add some separation between the delete and regular buttons */
{
  margin-left: calc(3*var(--separation));
}

/* === Overview settings === */
#overview 
/* The overview should always be visible */
{
  min-height: min-content;
  display: flex;
  flex-direction: column;
}

#confirm 
/* A button a bit below the overview */
{
  margin-top: calc(2 * var(--separation));
  margin-left: auto;
  padding: calc(2 * var(--separation));
  background-color: var(--background);
}

#profiles
/* The profiles view */
{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 0;
  background-color: var(--background);
}

#profile-selector
/* The selection and view on profiles */
{
  display: flex;
  flex-grow: 1;
  height: 0;
  flex-direction: column;
  align-items: stretch;
}

#profile-selector > div
{
  flex-basis: 0;
}

#profile-edits
/* The buttons to edit a profile */
{
  display: flex;
  flex-direction: row;
  margin: calc(var(--separation)*3);
}

#stock
/* The profiles view */
{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 0;
  background-color: var(--background);
}

#metrics
/* The metrics view */
{
  background-color: var(--background);
}

#drink-selector
/* The selection and view on profiles */
{
  display: flex;
  flex-grow: 1;
  height: 0;
  flex-direction: column;
  align-items: stretch;
}

#drink-selector > div
{
  flex-basis: 0;
}

#drink-edits
/* The buttons to edit a profile */
{
  display: flex;
  flex-direction: row;
  margin: calc(var(--separation)*3);
}
#drinkprops
/* The profile data container */
{
  flex-grow: 36;
  background-color: var(--background);
  margin: calc(3*var(--separation));
  display: flex;
  flex-direction: column;
}

#drinkprops > div
/* Set elements of subelements to grow from same basis */
{
  flex-basis: 0;
}

.c-button
/* The new user button */
{
  background: var(--foreground);
  padding: calc(2*var(--separation));
  margin-right: var(--separation);
}

#new-user, #del-user
/* The new user button */
{
  background: var(--foreground);
  padding: calc(2*var(--separation));
  margin-right: var(--separation);
}

#profile
/* The profile data container */
{
  flex-grow: 36;
  background-color: var(--background);
  margin: calc(3*var(--separation));
  display: flex;
  flex-direction: column;
}

#profile > div
/* Set elements of subelements to grow from same basis */
{
  flex-basis: 0;
}

#profile-name
/* Name header on profile tab */
{
  background-color: var(--foreground);
  font-size: calc(1.5 * var(--fontsize));
  padding: var(--separation);
  flex-grow: 0;
}

.icon-container
{
  display: flex;
  align-items: center;
}

#profile-body
/* Contents on the profile tab */
{
  flex-grow: 1;
  overflow-y: scroll
}

#drinks-body
/* Contents on the drinks tab */
{
  flex-grow: 1;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

#commit-drink-changes
/* Save button on drinks tab */
{
  margin-top: auto;
}

#payment-list
/* The list containing all payments */
{
  display: flex;
  flex-direction: column;
}

.payment
/* Payment element */
{
  padding: var(--separation);
}

.sub-profile
/* Element on the profile tab */
{
  padding: calc(3*var(--separation));
}

.single-line-editable
/* Container for saldo */
{
  display: flex;
  align-items: baseline;
}
.single-line-editable > .editable-text
/* Make editable text grow as wide as necessary */
{
  flex-grow: 0;
}

.editable-text-icon
{
  filter: invert(40%) brightness(97%);
}

.flash
/* If a button is clicked */
{
  background-color: green !important;
}

.low-balance
/* If a person has a low balance */
{
  color: orange;
}

.negative-balance
/* If a person has a negative balance */
{
  color: brown
}

.editable-text > div
/* Make textbox not change size when editing */
{
  margin-top: 2px;
  margin-bottom: 3px;
}

input, button
/* Fix a problem where input and button don't update their fontsize */
{
  font-size: inherit;
}

.transaction-container
{
  display: flex;
  flex-direction: column;
}

.transaction-icon
{
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(3*var(--separation));
  margin-bottom: calc(2*var(--separation));
  width: 70%;
}

.flex_vcenter
/* Center vertically */
{
  margin-top: auto;
  margin-bottom: auto;
}

/* Media queries streeplijst */
@media (orientation: landscape) and (min-width: 20rem)
{
  /* Make the columns stack horizontally */
  #streeplijst 
  {
    flex-direction: row;
  }
  #streeplijst > div 
  {
    margin-top: calc(3 * var(--separation));
    margin-bottom: calc(3 * var(--separation));
    max-height: 100%;
  }
  /* Set the distribution of columns in landscape mode */
  #persons 
  {
    height: unset;
  }
  #drinks 
  {
    height: unset;
    flex-shrink: initial;
  }
  #orders
  {
    height: unset;
  }
  #profile-selector
  {
    flex-direction: row;
  }
  #profile-selector > div
  {
    margin-top: calc(3 * var(--separation));
    margin-bottom: calc(3 * var(--separation));
  }
  #profile
  {
    flex-grow: 56;
    height: unset;
  }
  #drink-selector
  {
    flex-direction: row;
  }
  #drink-selector > div
  {
    margin-top: calc(3 * var(--separation));
    margin-bottom: calc(3 * var(--separation));
  }
  #drinkprops
  {
    flex-grow: 37.333;
    height: unset;
  }

}

/* New style programming */

/* List that should always be rendered horizontally */
.list {
  display: flex;
  flex-direction: column;
}

/* Any long list should scroll as overflow */
ul.list {
  overflow: scroll;
}

/* Anything should stay within the visible window */
.windowcontained {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 0;
}

/* Something that is considered its own region */
.element {
  background-color: var(--background);
  padding: calc(3*var(--separation));
}

button {
  margin: calc(0.5 * var(--separation));
  padding: var(--separation);
  background-color: var(--foreground);
  overflow-x: hidden;
  flex-shrink: 0;
  font-family: inherit;
  color: inherit;
  border: inherit;
}

button.small {
  width: max-content;
}

button.end {
  margin-top: auto;
}

@media (orientation: landscape) and (min-width: 20rem) {
  .windowcontained {
    flex-direction: row;
  }


}

.flex_size_1_of_1 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 120;
}
.flex_size_1_of_2 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 60;
}
.flex_size_1_of_3 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 40;
}
.flex_size_2_of_3 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 80;
}
.flex_size_1_of_4 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 30;
}
.flex_size_3_of_4 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 90;
}
.flex_size_1_of_5 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 24;
}
.flex_size_2_of_5 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 48;
}
.flex_size_3_of_5 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 72;
}
.flex_size_4_of_5 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 96;
}
.flex_size_1_of_6 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 20;
}
.flex_size_5_of_6 {
	flex-basis: 0;
	min-height: 0;
	min-width: 0;
	flex-grow: 100;
}