/*  rules for select forms, and other field styling, extracted from prd.css */
:root {
  --inset-label__color: gray;
  --jb-blauw: #253776;
  --search-bar__border-color: var(--jb-blauw);
  --select-field-with-value__border-color: var(--jb-blauw);
  --select-field-with-value__background-color: var(--lichtblauw);
  --select-field-without-value__border-color: red;
  --select-field-without-value__background-color: var(--geel);
  --field-width: 12rem;
  --field__border: #aaa;
  --field__border-radius: .25em;
  --font-size-input: .9rem;
  --border-thickness:.065em;
  --control-line-height:2.5rem;
  --control-min-height:3rem;
  --operator-button__background-color: #def;
  --operator-button__border-color: var(--jb-blauw);
  --operator-button__color: #999;
}
input, select {
  font-size:var(--font-size-input);
}
/* FORMS, containers */
/*form.insert fieldset {
  display:grid;
}
form.insert fieldset.inline {
  display:table-row;
}
*/
/*  current record, for multi-stage insert */
form.insert .result-list,
div.insert .result-list
{
  font-size: 1.1em;
  padding:.5em 1em;
  border-radius: var(--field__border-radius);
  border:solid var(--border-thickness) var(--search-bar__border-color);
  background-color: var(--lichtblauw);
}
form .field-container select, 
form.select .field-container option, 
form .field-container div.field > input,
form.select .field-container .multi-select-container
{
  font-size:var(--font-size-input);
  height:var(--control-line-height);
  width: var(--field-width);
}
form .field-container textarea
{
  font-size:var(--font-size-input);
}

.field select {
  min-height: var(--control-line-height);
}
select option {
  padding:.5em .75em;
}
select.no-values {
  color: red;
}
select[required].no-value-selected, 
option.no-value {
  font-style:italic;
  color:var(--jb-blauw);
  border:2px solid red; 
}
.field-container select.boolean-value {
  padding-left:.1em;
  width: 4.5em;
  min-width: 4.5em;
}

.main-page > form, 
.main-page > form > div.field-container, 
.main-page > div.field-container {
  
  background-color:var(--form-background-color);
  padding:1em;
  margin-bottom:2em;
}
.main-page > div.field-container .tab div.container {
  background-color:white;
  padding:1em;
}
.main-page > form.get {
/*  float:right;*/
}
.main-page > form label {
  display:block;
  font-size:var(--font-size-input);
  padding-left:.2em;
}
.main-page > form > details {
  margin-top: .5em;
}

div.field-container {
  display:table;
}
div.field-container.blocks-grid > div.fieldsets,
div.details.form.blocks-grid > div.fieldsets
{
  display:flex;
  flex-wrap:wrap;
}
div.field-container div.field > label {
/*  display:table-cell;*/
  display:inline-block;
  text-align:left;
  font-weight:bold;
  padding-right:.5em;
}
div.field-container .block-label label {
  display:block;
}
  
div.field-container div.field > * {
  margin-bottom:.5em;
}

/*  special treatment for html fields */
div.field span.html {
  display:inline-block;
  height:2em;
  line-height:2em;
  padding-top:0;
  margin-top:.5em;
  width:13.75em;
}
div.field div.html-area {
  line-height:1.75em;
  padding-top:.5em;
}

div.field-container.three-columns-grid {
    display:grid;
    grid-template-areas: 
        'left center right';
    grid-template-columns: auto minmax(0,auto) auto;
    grid-column-gap:1em;
    justify-content:start;
}
@media screen and (max-width: 1500px) {
  div.field-container.three-columns-grid {
    display:grid;
    grid-template-areas: 
        'left center';
    grid-template-columns: auto auto auto;
    grid-column-gap:1em;
  }
}
input.operator-toggle:checked ~ * div.field-container.three-columns-grid {
    grid-template-areas: 
        'left center'
        'right right';
    grid-template-columns: auto minmax(0,auto);
    grid-column-gap:1em;
    justify-content:start;
}
div.field-container.two-columns-grid {
    display:grid;
    grid-template-areas: 
        'left right';
    grid-template-columns: auto auto;
    grid-column-gap:1em;
    justify-content:left;
}
div.column.left {
  grid-area:left;
}
div.column.center, div.column.middle {
  grid-area:center;
}
form .center {
  text-align:initial; /* to override an overly generic definition in article.css */
}
div.column.center input, div.column.right input {
/*  width:11em;*/
}
div.column.right {
  grid-area:right;
}
/* search bar */
form.select .search-bar {
  border: solid .1em var(--search-bar__border-color);
  border-radius: var(--field__border-radius);
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  width:70%;
  position:relative;
  box-sizing:initial;
}
form.select .search-bar .field {
  display:inline-block;
  flex-grow:2;
}
form.select .search-bar div.field > input {
  width: 100%;
  border:none;
  padding:0 .75em;
  min-height:var(--control-line-height);
  font-size:1.1em;
  border-radius: var(--field__border-radius);
}
form.select .search-bar input:focus {
  outline:none;
}
form.select .search-bar input:active {
  border:none;
  outline:none;
}
form.select .search-bar button[type=submit] {
  float:right;
  margin:-1px;
}
form.select .search-bar .reset {
  position:absolute;
  left:100%;
  padding-left:1em;
  width:8em;
  min-height:var(--control-line-height);
  margin-left:1em;
}
form.select .search-bar .reset:hover {
  outline: solid .1em var(--lichtblauw);
}
.search-bar + details {
  margin-top:1.3em;
}
.search-bar .choice-container {
  position:absolute;
  top: .5em;
  right: 3em;
}

/* labels inside fields */
form fieldset.inset-label > div.field {
  position:relative;
  margin-top:1.75em;
  display:block;
}
form fieldset.inset-label > div.field:first-child {
  margin-top:.5em;
}
form fieldset.inset-label > div.field > label,
form fieldset.inset-label > div[loading='true']::after 
{
  position:absolute;
  font-weight:normal;
  line-height:1;
  transition: all;
  transition-duration: .5s;
  color:var(--inset-label__color);
  width:auto;
  cursor:pointer;
}
form fieldset.inset-label > div.field:not([data-has-value]) > label {
  margin-top:.2em;
  font-size:1em;
  font-style:italic;
  padding-left:.5em;
}
form fieldset.inset-label div[loading='true'] {
  position:relative;
}
form fieldset.inset-label div[loading='true']::after {
  right:0;
}

form fieldset.inset-label > div.field > label,
form fieldset.inset-label > div.field:focus-within > label,
form fieldset.inset-label div[loading='true']::after {
  font-size:.85em;
  margin-top:-3.5rem;
  font-style:normal;
  padding-left:.2em;
  z-index:1;
}
form fieldset.inset-label div.field > input,
form fieldset.inset-label div.field > select,
.click-to-open > input.filter.field,
.click-to-open > select
{
  margin-top:0;
  height:var(--control-line-height);
  border-radius: var(--field__border-radius);
/*  padding:0 1em 0 .5em;*/
  padding-left:.5em;
  width: auto;
}
.multi-select-container > input.filter.field {
/*  z-index:-1;*/
}
form fieldset.inset-label > div.field > input + select {
  margin-left:.5em;
}
form fieldset.inset-label > div.field[data-has-value] > input,
form fieldset.inset-label > div.field[data-has-value] > select,
form fieldset.inset-label > div.field[data-has-value] *.filter.field
{
  border: solid .1em var(--select-field-with-value__border-color);
  background-color: var(--select-field-with-value__background-color);
}
div[data-has-value][data-mode=edit] *::placeholder,
form fieldset.inset-label > div.field[data-has-value] *::placeholder,
form fieldset.inset-label > div.field[data-has-value] select.filter.field  {
  color:black;
  font-style:normal;
  font-size:var(--font-size-input);
  opacity:1;
}
div[data-has-value] > .modal-wrapper {
  visibility:collapse;
}
div[data-has-value][data-mode=edit] *:focus::placeholder {
  font-style:italic;
  opacity:.5;
}
*::placeholder {
  opacity:0;
}
.container .aggregate {
  display:none;
  }
input.aggregator-toggle:checked ~ .container .aggregate {
  display:table-cell;
} 
form.inline {
  display:inline;
}
div.inline-block {
  display:inline-block;
}

div.column > fieldset > .field > label,
div.column > fieldset > details > .field > label {
  width: var(--label-width);
}

div.column > fieldset.data-row > .field label {
  width:auto;
}
fieldset.data-row .modal-wrapper button {
  margin-left:0;
}

/* FIELDSET  */

fieldset.goto, fieldset.select {
  border-style:solid;
  border-width: 1pt;
  border-color:var(--jb-blauw);
  padding: .5em;
  max-width:1000px;
}
fieldset.select div.field > input {
  padding: .5em;
}
fieldset.select {
  border-width: .5pt;
  border-radius: var(--border-radius);
  border-color:var(--jb-blauw);
  float:left;
  margin-right:.25em;
  margin-bottom:.5em;
/*  width:100%;*/
}
.select.column.full {
  border: none;
}

fieldset.inline {
  float:none;
  border:none;
  padding:0;
  margin-bottom:0;
  display:table-row;
}

/* details form fieldset */

.details.form fieldset {
  display:inline-block;
  vertical-align:top;
  border:var(--field-line-thickness) solid var(--field-border-color);
  margin:1em 1em 0 0;
  padding:.5em;
  padding-left:1em;
  border-radius: var(--field__border-radius);
  max-width:60em;
  background-color:var(--form-background-color);
}
.details.form fieldset.data-row {
  display:flex;
  flex-wrap:wrap;
}

.details.form fieldset[class*='key-value'] > div:not([hidden]) {
  display: flex;
  align-items: center;
}
.details.form fieldset[class*='data-row'] > div:not([hidden]) {
  align-items: start;
}
.details.form fieldset[class*='key-value'] > div:not([hidden]) > label
{
  line-height:initial;
}
.details.form fieldset[class*='key-value'] > div:not([hidden]) > select {
  height:var(--control-line-height);
}

.details.form fieldset[class*='key-value'] > div:not([hidden]) > input:not([hidden]) {
  min-height:var(--control-line-height);
}
.details.form fieldset > div.field {
  min-height:var(--control-min-height);
  padding-bottom:.5em;
}
.details.form fieldset .field.hidden,
label[hidden],
div[hidden],
fieldset[hidden]
  {
  display:none !important;
}
td[hidden] {
/*  display:inherit;*/
  visibility:hidden;
}

div.column > fieldset.inline > div.field {
  display:table-cell;
  padding-right:1em;
}
div.column > fieldset.inline > div label {
  display:inline-block;  
}
div.column > fieldset.inline > div.field + div.field {
  padding-left:.75em;
}
fieldset.data-row > div {
  flex-direction:column;
  align-items:flex-start;
  margin-right:1em;
}

fieldset.data-row > div > label {
  padding-left:.3em;
  margin-top:0;
  padding-bottom:.25em;
}

fieldset.report legend {
  margin-bottom: -.25em;
  background-color: var(--perzik);
  padding: 0 .5em;
  border-radius: var(--field__border-radius);
  border: .05em solid var(--jb-blauw);
}


nav fieldset {
  background-color:#bcd;
  margin-top:.75em;
}
.main-page fieldset.goto {
  display:none;
}
fieldset.goto select, fieldset.filterbox select {
  min-width: var(--navbar-input-width);
  height:var(--text-line-height);
}
fieldset.filterbox select + input {
  line-height:var(--text-line-height);
  padding-left:.5em;
}

fieldset select + input, fieldset select, fieldset label  {
/*  margin-top:.5rem;*/
}
fieldset input, fieldset select {
  border: solid var(--border-thickness) var(--field__border);
  background-color: white;
}
/* FIELD properties */
input {
  border-width: var(--border-thickness);
}

input[type=checkbox] + label {
  display:inline;
}

/* START hide arrows for number fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* END hide arrows for number fields */

input[loading='true'] {
  background-color: var(--lichtblauw) !important;
}
input[data-value='empty'], input[data-nomatch] {
  background-color: var(--select-field-without-value__background-color) !important;
  border-color:var(--select-field-without-value__border-color);
  outline-color:var(--select-field-without-value__border-color);
}
div[loading='true'] {
  position:relative;
}
div[loading='true']::after {
  content: 'loading...';
  font-size:.7em;
  position:absolute;
  right:.5em;
  visibility:visible;
  
}  
form input[type=text], form input[type=password] {
  display:table-cell;
  padding-left:.65em;
  width: var(--field-width);
}
input[type=email] {
  padding-left:.33em;
  width:25em;
}
::placeholder {
  font-style:italic;
}
*[data-has-value] > ::placeholder {
  font-style:normal;
  opacity:1;
  color:black;
}

form input[hidden] {
  visibility:collapse;
  }
/* ======================================================================= */
/* multi-select control (in development) */
/* inspired by https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option */
.click-to-open 
{
  position:relative;
  height:auto;
  display:inline-grid;
}
.over-select {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.popup-container .options,
.popup-container .checkboxes {
  max-height:30em;
}
.popup-container .checkbox-buttons {
  display:flex;
  width:100%;
  justify-content:center;
  height:1.5em;
  margin-bottom:.5em;
}

div[data-lazy-loading]:not([data-has-value]) .checkbox-buttons,
div.click-to-open:not([data-has-value]) .checkbox-buttons button.go
{
  display:none;
}
div > .popup-container {
  visibility:collapse;
  flex-direction:column;
  position:absolute;
  z-index:3;
  opacity:0;
  transition: all .35s ease-in-out;
  width: 0;
  top:100%;
  display:none;
}
.choice-container.operator > .popup-container {
  top: -.5em;
  left:1.5em;
}
div[data-active] > .popup-container {
  opacity:1;
  width:auto;
  visibility:visible;
  display:flex;
}
form.select .field-container .multi-select-container select {
  max-width:initial;
  min-width:var(--field-width);
  font-style:italic;
  color:#666;
  background-color:white;
}
div[data-active] > select,
div[data-active] > input
{
  background-color: #fed;
  border-radius:.25em .25em 0 0;
}
div[data-active] .checkboxes,
div[data-active] .options {
  display:block;
  overflow-y:auto;
  border: solid var(--border-thickness) black;
  margin-top:-.05em;
}
.choice-operator.operator .options {
  max-height:initial;
}
.option-container > label {
  padding: 0;
  min-height:1.75em;
  min-width:var(--field-width);
  width:max-content;
  max-width:50em;
  font-size:.95em;
}
.option-container > label.single-select {
  padding:.5em 0;
  line-height:2.2em;
}
.option-container > label > input
{
  width:1.15em;
  height:1.15em;
  margin: auto .75em auto 0;
}
.option-container {
  display: flex;
  background-color:white;
  margin:0;
  padding:0 .5em;
  border-radius:0;
  min-height: var(--control-min-height) ; 
  align-items:center;
}
.option-container:hover, 
.option-container[data-focus] {
  background-color:#def;
}
.single-select-container .option-container[data-selected] {
  background-color:#fed;
  display:none;
}
.option-container[hidden] {
  display:none;
}
.option-container + .option-container {
  border-top: var(--border-thickness) solid var(--lichtblauw);
}
.option-container * {
  margin-bottom:0;
  min-height:var(--control-line-height);
}
.option-container .multi-select {
  display:inline-block;
}
label.multi-select,
label.choice
{
  line-height:var(--control-min-height);
  width:100% !important;
  display:table-cell;
  white-space:nowrap;
  }
.multi-select-container .checkbox-buttons button {
  color:white;
  width:50%;
  margin:0;
  padding-bottom:1.5em;
  height:var(--min-line-height);
}
.multi-select-container .checkbox-buttons button.apply {
  background-color:green;
  border-radius: 0 0 0 .25em;
  margin:0;
}
.multi-select-container .checkbox-buttons button.reset {
  background-color:gray;
  border-radius: 0 0 .25em 0;
  margin:0;
}

.multi-select-container .checkbox-buttons button.go {
  width:2em;
  border-radius:0;
  margin:0;
}
button.go * {
  padding-top: .15em;
}
input.multi-select,
input.multi-select:focus
{
  border: none;
  outline: none;
  box-shadow: none;
  margin-right:.75em;
}

/* ======================================================================= */
/* combo-select control */
/* Do not use multiple selectors (separated by ',') when you use `::part`. */

jb-combo-select {
  width: max-content;
  --jb-combo-select-color: #def; /* color of option when hovered or selected */
  --jb-combo-selected-color: #cde; /* color of option when selected */
  --jb-combo-input-selected-color: var(--select-field-with-value__background-color); /* color of input when selected is shown */
  --jb-combo-input-focus-color: #fed; /* color of input field when focussed */
  font-family: 'Noto sans';
}
jb-combo-select:invalid {
  border: 2px solid red;
}

jb-combo-select::part(jb-select-input) {
  font-family: 'Noto sans';
  height: var(--control-line-height);
  border-radius: var(--field__border-radius);
  border: solid var(--border-thickness) var(--field__border);
}
form.select jb-combo-select::part(jb-select-input-data-selected-shown) {
  background-color: var(--jb-combo-input-selected-color);
  border: solid var(--border-thickness) var(--select-field-with-value__border-color);
}
form.select jb-combo-select::part(jb-option-container) {
  max-height: 30em;
}
div.result-data-group jb-combo-select::part(jb-select-input) {
  border: var(--field-line-thickness) solid var(--field-border-color);
  border-left: 3px solid var(--field-border-color-enabled);
  border-radius: var(--border-radius);
  border-top-left-radius: calc( var(--border-radius) * .5);
  border-bottom-left-radius: calc( var(--border-radius) * .5);
  --jb-combo-input-selected-color: white;
}

jb-combo-select .select-multiple-controls {
  display: flex;
  flex-direction: row;
  order: 99;
}
jb-combo-select .select-multiple-controls button {
  outline: none;
  border: none;
  margin: 0 !important; /* otherwise bbr-prd.css overrides this */
  border-radius: 0 !important;
}
jb-combo-select .select-multiple-controls *:first-child {
  border-radius: 0 0 0 .25em !important;
}
jb-combo-select .select-multiple-controls *:last-child {
  border-radius: 0 0 .25em 0 !important;
}
jb-combo-select .select-multiple-controls .apply-selection {
  flex: 1 1 auto;
  background-color: green;
}
jb-combo-select .select-multiple-controls .go {
  display: none;
}
*[data-has-value]>jb-combo-select .valid.select-multiple-controls .go {
  display: initial;
}
jb-combo-select .select-multiple-controls .select-all {
  background-color: #def;
  color: var(--jb-blauw);
}
jb-combo-select .select-multiple-controls .select-none {
  background-color: gray;
  color: white;
}
jb-combo-select button.select-all:empty:after {
  font-style: normal;
  content: "\2611";
}
jb-combo-select button.select-none:empty:after {
  font-style: normal;
  content: "\2610";
}

/* ======================================================================= */
/* choice control, for operator pop up */
.choice-container.operator {
  display:inline-block;
  position:absolute;
  visibility:hidden;
  right:-1em;
}

div.field:focus-within .choice-container.operator,
div.field:hover .choice-container.operator,
div.field[data-has-value] .choice-container.operator,
.choice-container.operator[data-has-value],
.click-to-open[data-active] + .choice-container.operator
{
  visibility:visible;
}
/*  proof of concept of a custom check mark */
/*input.multi-select:checked ~ span {
    border-bottom: .1em solid;
    border-left: .1em solid var(--jb-blauw);
    border-radius: 0 0 0 .15em;
    transform: rotate(-50deg);
    height: 8px;
    right: 16px;
    top: 22px;
    width: 1em;
}
*/
input.multi-select:hover {
  box-shadow:none !important;
}
/* experiment with auto width, from https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas */
div.column > fieldset > div.field,
div.field-container > fieldset > div.field,
fieldset > details > div.field {
  display:inline-grid;
  justify-content:start;
  grid-template-columns: var(--label-width) 1fr auto;
  align-items:center;
  position:relative;
  margin-right:1em;
}
form div.column > fieldset > div.field {
  display:flex;
}
*[data-ghost-text] {
  grid-template-columns: 1fr auto;
}
*[data-ghost-text]::after {
  content: attr(data-ghost-text) ' ';
  visibility:hidden;
  white-space:pre-wrap;
    width: auto;
    min-width: 1em;
    grid-area: 1/2;
    font: inherit;
    padding:0 0.75em;
    margin: 0;
    resize: none;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    }
    
div.field > label,
div[data-ghost-text] > label,
div[data-ghost-text] > *:nth-child(1),
div[data-ghost-text] > div.popup-container,
*.click-to-open[data-ghost-text]::after
{
  grid-area: 1/1;
}
div.field > input,
div.field > select,
div[data-ghost-text] > div.click-to-open {
  grid-area:1/2;
}
div[data-ghost-text] > input + * {
  grid-area:1/2;
}
div.field > input + button {
  grid-area: 1/3;
}
div.field > button
, div.field > a > button {
  margin:0;
  height:var(--control-line-height);
}
/* ======================================================================= */
/*  result list and filter options subsetting */
*[filtered=true] {
  font-size:inherit;
  opacity:1;
}
form.select .field-container *[filtered=false],
.container *[filtered=false],
*[filtered=false], 
*[filtered=false] * 
{
  --table-body-padding:0;
  transition: all .35s linear;
  font-size:0;
  height:0 !important;
  min-height:0 !important;
  line-height:0;
  padding:0;
  margin:0;
  border:none;
}
*[filtered=false] jb-combo-select {
  display:none;
}
div.option-container[filtered=false],
*[filtered=false] input {
  display:none;
}
.select.container {
  --select-field-with-value__background-color: white;
}


/* ======================================================================= */

form.select .field-container select.operator {
  width:10em;
  margin-left:.75em;
  padding-left:0;
  height:1.9em;
  display:none;
  font-size:1em;
}
form.select button.operator-toggle {
  padding: 0;
  padding-left:.2em;
  padding-top:.02em;
  top: -1.25em;
  margin-left:.25em;
  position: relative;
  border-radius: 1em;
  width: 1.25rem;
  height:1.25rem;
  font-size: .7em;
  color: var(--operator-button__color);
  background-color: var(--operator-button__background-color);
  border: solid .1em var(--operator-button__border-color);
}
form.select button.operator-toggle:hover,
form.select button.operator-toggle:focus,
div[data-active] button.operator-toggle {
  background-color: green;
  color:white;
}
form.select button.operator-toggle[data-value] {
  background-color: var(--jb-blauw);
  color:white;
}
form.select .search-bar select.operator {
  position:absolute;
  left:0;
  bottom:100%;
  margin-bottom:.5em;
}

input.operator-toggle:checked ~ * select.operator {
  display:table-cell;
}
input.operator-toggle:checked ~ .field-container label {
/*  display:block;*/
}
label.operator-toggle {
  color: var(--bbr-color);
}
label.operator-toggle::before {
  content: 'Show ';
}
input.operator-toggle:checked ~ * label.operator-toggle::before {
  content: 'Hide ';
}
label.operator-toggle:hover {
    outline: solid .2em var(--lichtblauw);
}

label.aggregator-toggle {
  margin-top:1em;
  display:block;
}
input.aggregator-toggle {
  visibility:hidden;
}
/* button styling */
button.link {
  background-color:transparent;
  color: #bbb;
  font-size:1.4em;
  padding:0;
  border:none;
  margin-left:.5em;
  position:relative;
  top:.2em;
}
button.link[data-has-value] {
  color:var(--jb-blauw);
}

/* element with description: hover,focus creates tooltip */
*[aria-description] {
  position:relative;
}

*[data-description]:hover::after,
*[data-description]:focus::after {
  position:absolute;
  content:attr(data-description);
  border: solid .1em var(--jb-blauw);
  border-radius: var(--field__border-radius);
  background-color:var(--lichtblauw);
}