/* Copyright (c) Michael Kirste, https://www.profile.michaelkirste.de */ 

:root{
    --border-line:#eee;
    --box-background:#fbfcfe;
    --grey-light:#c4cdd4;
    --grey-dark:#98a0a6;
    --roundedbordersradius-inner:0.2em;
    --roundedbordersradius:0.4em;
}

/* Settings Form (general) */
form.settings{font-size:0.8em;display:flex;flex-wrap:wrap;gap:1em;}
form.settings fieldset legend{padding-inline:0.5em;font-weight:bold;}
form.settings fieldset p{margin:0.25em;display:flex;justify-content:space-between;gap:1em;}
form.settings fieldset p:has(button) {flex-direction:column;row-gap:0.5em;}
form.settings fieldset p:has(button) button {font-weight:600;color:currentColor;}
@media (max-width:800px){
    form.settings fieldset{width:100%;}
    form.settings fieldset p button {padding:0.5em;}
}

/* Settings Form (Scenario) */
form.settings fieldset.scenario p {flex-direction:column;gap:0.2em;}
form.settings fieldset.scenario select {padding:0.5em 0.25em;}

/* Settings Form (Parameter Grid) */
@media(min-width:1000px){
  form.settings fieldset.parameter-grid {display:grid;grid-template-columns: repeat(2,1fr);gap:0.2em 1em;}
}

/* KPIs */
section.kpis{margin-top:1em;background:var(--box-background);border-radius:var(--roundedbordersradius);}
section.kpis{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--border-line);margin-bottom:1em;}
section.kpis article{padding:0.6em;margin:0;border-right:1px solid var(--border-line);}
section.kpis article:last-child{border:0;}
section.kpis span{display:block;font-size:0.6em;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;}
section.kpis strong{display:block;margin-top:0.25em;font-variant-numeric:tabular-nums;white-space:nowrap;}
@media(max-width:1000px){
    section.kpis{grid-template-columns:repeat(4,1fr);}
    section.kpis article{border:0;border-right:1px solid var(--border-line);}
    section.kpis article:nth-child(-n+4){border-bottom:1px solid var(--border-line);}
    section.kpis article:nth-child(4){border-right:0;}
}
@media(max-width:660px){
    section.kpis{grid-template-columns:repeat(2,1fr);}
    section.kpis article{border:0;border-right:1px solid var(--border-line);}
    section.kpis article:nth-child(-n+2){border-bottom:1px solid var(--border-line);}
    section.kpis article:nth-child(2){border-right:0;}
}

/* Simulation Board */
section.simulation-board{margin-top:1em;background:var(--box-background);border-radius:var(--roundedbordersradius);}
section.simulation-board{display:grid;grid-template-columns:0.6fr 1.4fr 1.4fr 0.6fr;border:1px solid var(--border-line);overflow:hidden;}
section.simulation-board .stage{border-right:1px solid var(--border-line);padding:0.6em;margin:0;min-height:15.6em;position:relative;}
section.simulation-board .stage:last-child{border:0;}
section.simulation-board .stage .stage-number{position:absolute;right:1em;top:1.2em;color:var(--grey-light);font-size:0.7em;font-weight:800}
section.simulation-board .stage h2{font-size:1em;margin:0 0 1em 0;}
section.simulation-board .stage h3, 
section.simulation-board .queue-title, 
section.simulation-board .stage dt{margin-bottom:0.4em;font-size:0.6em;text-transform:uppercase;letter-spacing:0.06em;font-weight:800;}
section.simulation-board .stage dd{margin:0;font-weight:800;}
section.simulation-board .queue-title{display:flex;justify-content:space-between}
section.simulation-board .queue{min-height:4em;border:1px dashed var(--grey-light);background:#f2f5f9;padding:0.5em;display:flex;gap:0.3em;align-content:flex-start;flex-wrap:wrap;border-radius:var(--roundedbordersradius-inner);}
section.simulation-board .queue .ticket{background:#e7f1ff;color:#075bc7;display:inline-grid;padding:0.2em 0.4em;font-size:0.7em;border-radius:var(--roundedbordersradius-inner);font-weight:800;animation:appear .25s ease;}
section.simulation-board .queue b{display:inline-grid;padding:0.2em 0.4em;font-size:0.7em;animation:appear .25s ease;}
section.simulation-board .queue .empty{margin:auto;color:var(--grey-dark);font-size:0.7em;}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(7em,1fr));gap:0.5em;}
.agent {border:1px solid;padding:0.4em;display:grid;grid-template-columns:auto 1fr;column-gap:0.8em;align-items:center;font-size:0.7em;border-radius:var(--roundedbordersradius-inner);}
.agent-icon {font-size:1.25em;grid-row:1/3;}
.agent small {color:var(--grey-dark);}
.agent.idle {border-color:#8ed6bb;background:#ebfaf4;}
.agent.idle .agent-icon {color:#19a974;}
.agent.busy {border-color:#f0b5bf;background:#fff8f9;}
.agent.busy .agent-icon {color:#e85d75;}
@media(max-width:880px){
    section.simulation-board{grid-template-columns: 1fr 1fr;}
    section.simulation-board .stage:first-child{min-height:0;border:0;border-bottom:1px solid var(--border-line);grid-column:1/-1;}
    section.simulation-board .stage:nth-child(3){border:0;}
    section.simulation-board .stage:last-child{min-height:0;border:0;border-top:1px solid var(--border-line);grid-column:1/-1;}
}

/* Queue Development */
div#queueChart{border-radius:var(--roundedbordersradius);margin-top:1em;padding:1em;background:var(--box-background);border:1px solid var(--border-line);overflow:hidden;}