/* fonts: https://icofont.com/icons */
:root{
  --ok_color:green;
  --ok_bgcolor:#ecffeb;
  --warn_color:orange;
  --warn_bgcolor:#feffcd;
  --alert_color:red;
  --alert_bgcolor:#ffc4c4;
  --inactive_color:rgb(85, 85, 85);
  --inactive_bgcolor:lightgrey;
  --gap: 10px;
  --item-height: 120px;
  
  --small-boundry: 1000px;
  --mid-content-margin: 60px;
  --popup-extra-margin: 20px;
}

* { margin:0; padding:0; border:0; font-family:Arial; }
html { font-size: 1em; }
body { height:100vh; }
html { height:100vh; }

#content {
  position:relative;
  box-sizing: border-box;
  display:flex;
  flex-flow: column nowrap;
  gap: var(--gap);
  top:var(--content-margin);
  margin: auto var(--content-margin) auto var(--content-margin);
}

#content > header {
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var( --gap);
  border:1px solid #a3a3a3;
  height: var(--item-height);
  border-radius:10px;
  padding:20px;
}
#content > header > h1{
  flex-grow:1;
}
#content > header > button{
  margin-left:auto;
}

ul{
  list-style: none;
  margin: 0px;
  padding-left: 10px;
  list-style-position:inside;
}
li{
  padding:4px;
}
input, select{
  border: 1px solid darkgrey;
}
button:not([class^='icon_']){
  padding: 0px 30px 0px 30px;
  height:40px;
  border:1px solid #333;
  border-radius:10px;
  color:#333;
  background-color: inherit;
  transition: background-color 0.1s;
  user-select:none;
}
button:not([class^='icon_']):hover{
  cursor:pointer;
  background-color: buttonface;
}

/* Refactor: this should be a class of button */
i{
  cursor:pointer; 
}

#monitors{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); /* VALID */
  grid-template-rows: repeat(auto, 200px); 
  grid-gap:var(--gap);
}
#monitors > div{
  --bgcolor:var(--ok_bgcolor);
  --color:var(--ok_color);
  border-radius:10px;
  padding:20px;
  height: var(--item-height);
  background-color:var(--bgcolor);
  border:1px dotted var(--color);
  color:var(--color);
}
#monitors > div.inactive{
  --bgcolor:var(--inactive_bgcolor);
  --color:var(--inactive_color);
  font-weight:bold;
  border:2px solid var(--color);
}

#monitors > div.warn{
  --bgcolor:var(--warn_bgcolor);
  --color:var(--warn_color);
  font-weight:bold;
  border:1px solid var(--color);
}
#monitors > div.alert{
  --bgcolor:var(--alert_bgcolor);
  --color:var(--alert_color);
  font-weight:bold;
  border:2px solid var(--color);
}
input:invalid {
  border:1px solid;
  border-color: red;
}


/* 
Yellow: popup_outer - the clickable layer to close outside the popup when theres a margin
Blue: popup_container - the border (closest in style to current .popup)
  Green: popup_title - the close button and title text
  Orange: popup_content - contains the various options on a clicky - current .popup html will be in here

Plan - 
 Comment out all
 Add a test
 Style
 Code
As all names can be made different (popup_outer needs to change) 
Fixing none trivial, re write from first principles...
Revert all the old so it is working
Add the new entirely seperately
*/
popup{
  display:none;
}
#popup_outside{
  display:none;
  position:fixed;
  top: 0px; bottom:0px;
  left: 0px; right:0px;
}
#popup_outside.display{
  display:flex;
  flex-direction: column;
  justify-content: center;
}
#popup_outside>.popup_container{
  display: flex;
  flex-direction: column;
  background-color: white;
  border:1px solid black;
  border-radius: 10px;
  padding: var(--gap);
  flex-grow:1;
  margin: var(--popup-margin);
}
#popup_outside>.popup_container>div.popup_header{
  border-bottom:1px dashed black;
  text-align: right;
}

#popup_outside>.popup_container>div:not(.popup_active,.popup_header){
  display:none;
}

#popup_outside>.popup_container>div.popup_active{
  flex-grow: 1;
}




 
/* .popup_outer{
  display: none;
  position: absolute;
  top:0px; left:0px; bottom:0px; right:0px;
  filter:none;
} */

/* body:has(.popup_active) .popup_outer{
  filter:blur(5px) grayscale(85%);
  display:block;
} */

/* .popup{
  display:none;
  align-items: stretch;
  justify-content: center;
  position:absolute;
  top:0; left:0; bottom:0; right:0;
  padding:30px;
  border:1px dotted darkslategray;
  background-color: white;
  border-radius:20px;
} */

/* .popup > *{
  flex-grow:1;
}
.popup.popup_active{
  display:flex; 
} */

#settings_button.settings_error{
  color:var(--warn_color);
  border-color:var(--warn_color);
  background-color: var(--warn_bgcolor);
}

/* Delete this after done as just replicates above */
:root{
  --small-boundry: 1000px;
  --mid-content-margin: 60px;
  --popup-extra-margin: 20px;
  --popup-margin: calc(var(--mid-content-margin) + var(--popup-extra-margin));
  --mid-popup-margin: calc(var(--mid-content-margin) + var(--popup-extra-margin));
  --small-content-width: calc( var(--small-boundry) - 2 * var(--mid-content-margin)); /* Only really used for smooth transition to no margin */
  --small-popup-width: calc( var(--small-boundry) - 2 * var(--mid-popup-margin)); /* Only really used for smooth transition to no margin */
}

/* Small */
@media screen and (max-width:1000px){
  :root{
    --content-margin: max(0px, calc((100vw - var(--small-content-width))/2));
    --popup-margin: max(0px, calc((100vw - var(--small-popup-width))/2));
    font-size:1.8em;
  }
  .notsmall{ display:none;}
  .medium{ display:none }
  .large{ display:none }
}
/* Medium */
@media screen and (min-width:1001px) and (max-width:1800px){
  :root{ 
    --content-margin: 60px;
  }
  .small{ display:none }
  .notmedium{ display:none;}
  .large{ display:none }
}
/* Large */
@media screen and (min-width:1801px){
  :root{
    --content-margin: 60px;
  }
  #content{
    margin: auto;
    width: 1680px;
  }
  
  .small{ display:none; }
  .medium{ display:none; }
  .notlarge{ display:none;}
}