* {
    font-family: "Helvetica Neue",sans-serif;
    padding: 0;
    margin: 0;
    border:0;
    box-sizing: border-box;
}

html {
    background-color: darkgray;
    height: 100%;
}

body {
    margin: 1rem;
    height: calc( 100vh - 5rem);
    overflow-y: auto;  /* turn on scrolling if content overflows */
}

h1 {
    text-align: center;
}

/* Shared Definitions --------------------------------------------------------------------------------------- */

.flex-new-row {
    width: 100%;
    background-color: bisque;
    height: 0;
}

.truncatable {
    text-overflow: ellipsis;
    overflow-y: hidden;
    text-wrap: nowrap;
}


/*---------------------------------------------------------------------- */
/* 1.0 SMALL DEVICES eg phones of various sizes up to 900px              */
/*---------------------------------------------------------------------- */

.Header     { grid-area: Header;    overflow: hidden; display: block }
.Status1    { grid-area: Status1;   overflow: hidden; display: block }
.Status2    { grid-area: Status2;   overflow: hidden; display: block }
.Status3    { grid-area: Status3;   overflow: hidden; display: block }
.Status4    { grid-area: Status4;   overflow: hidden; display: block }
.Plot1      { grid-area: Plot1;     overflow: hidden; display: block }
.Plot2      { grid-area: Plot2;     overflow: hidden; display: block }


@media (orientation: portrait) {

    /* The format below is designed for use on phones and small devices in portrait mode. It is based on */
    /* a 14 x 2 grid and a height that is 3x the viewport height which will cause the layout to scroll.  */
    .grid-container {
        display: grid;
        height: 300vh;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    1fr 10fr 10fr 10fr 10fr 10fr 10fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header   Header'
                              'Status1  Status1'
                              'Status2  Status2'
                              'Status3  Status3'
                              'Status4  Status4'
                              'Plot1    Plot1'
                              'Plot2    Plot2 ';
    }

    html {
        /*
          Fluid font size scaling from 9px to 14px between viewport widths 500px and 900px.
          - At 500px: font-size is 9px
          - At 900px: font-size is 14px
          - Between: linearly interpolates
          - Use clamp() to prevent overshoot outside this range
        */
        font-size: clamp( 9px, calc(9px + 5 * ((100vw - 400px) / 400)), 14px );
    }
}

@media (orientation: landscape) {

    /* The format below is designed for use on phones and small devices in landscape mode. It is based on */
    /* a 13 x 2 grid and a height that is 6x the viewport height which will cause the layout to scroll.   */
    .grid-container {
        display: grid;
        height: 600vh;
        grid-template-columns: 3fr 3fr 1fr 1fr 1fr 1fr 3fr 3fr;
        grid-template-rows:    1fr 10fr 10fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header   Header   Header   Header   Header   Header   Header   Header'
                              'Status1  Status1  Status2  Status2  Status3  Status3  Status4  Status4'
                              'Plot1    Plot1    Plot1    Plot1    Plot2    Plot2    Plot2    Plot2 ';

        padding-bottom: 1rem;
    }

    html {
        /*
          Fluid font size scaling from 9px to 14px between viewport widths 500px and 900px.
          - At 500px: font-size is 9px
          - At 900px: font-size is 14px
          - Between: linearly interpolates
          - Use clamp() to prevent overshoot outside this range
        */
        font-size: clamp( 9px, calc(9px + 5 * ((100vw - 400px) / 400)), 14px );
    }
}


/*---------------------------------------------------------------------- */
/* 2.0 TABLETS, LAPTOPS and SMALL DESKTOP monitors 900px to 1900px       */
/*---------------------------------------------------------------------- */

@media (min-width: 900px) {

    html {
        font-size: calc(0.25rem + 0.5vw);
    }

    /* The format below is designed for use on tablets, laptops and desktops devices. It's based on */
    /* a 5 x 8 grid and a height that is equal to the viewport height. It should not require scrolling. */
    .grid-container {
        display: grid;
        height: 100%;
        grid-template-columns: 3fr 3fr 1fr 1fr 1fr 1fr 3fr 3fr;
        grid-template-rows:    1fr 10fr 10fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Header   Header   Header   Header   Header   Header   Header   Header'
                              'Status1  Status1  Status2  Status2  Status3  Status3  Status4  Status4'
                              'Plot1    Plot1    Plot1    Plot1    Plot2    Plot2    Plot2    Plot2 ';
    }

    html {
        /*
          Fluid font size scaling from 7px to 11px between viewport widths 900px and 1900px.
          - At 900px: font-size is 7px
          - At 1900px: font-size is 14px
          - Between: linearly interpolates
          - Use clamp() to prevent overshoot outside this range
        */
        font-size: clamp(7px, calc(7px + 7 * ((100vw - 900px) / 1000)), 14px);
    }

    body {
        margin: 1rem;
        height: calc(100vh - 1rem);
    }
}

/*---------------------------------------------------------------------- */
/* 3.0 LARGE DEVICES eg 24 inch monitor and above                        */
/*---------------------------------------------------------------------- */

@media (min-width: 1920px) {

    html {
        /*
          Fluid font size scaling from 14px to 18px between viewport widths 1900px and 2560px.
          - At 1900px: font-size is 14px
          - At 2560px: font-size is 18px
          - Between: linearly interpolates
          - Use clamp() to enforce font-size limits within this range
        */
        font-size: clamp(14px, calc(14px + 4 * ((100vw - 1920px) / 660)), 18px);
    }
}

/* Grid Cell: 'Header' -------------------------------------------------------------------------------------- */

.headerContainer {
    background-color: lightgray;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    flex-flow:row nowrap;
    align-content: stretch;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.headerLabel {
    flex: 0 0 15rem;
    text-align: center;
    font-size: 2.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.headerTimestamp {
    flex: 0 0 25rem;
    background-color: lemonchiffon;
    color: black;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 2.5rem;
}

.headerText {
    flex: 1 0 25rem;
    background-color: lemonchiffon;
    color: black;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 2.5rem;
    text-wrap: nowrap;
    white-space: nowrap;
}

/* Grid Cell: 'Status' -------------------------------------------------------------------------------------- */

.status1Container, .status2Container, .status3Container, .status4Container,
.plot1Container, .plot2Container
{
    background-color: lightgray;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    flex-flow:row wrap;
    align-content: stretch;
    align-items: center;
    padding-bottom: 1rem;
}

.status1Header, .status2Header, .status3Header, .status4Header,
.plot1Header, .plot2Header
{
    color: black;
    flex: auto;
    height: 3rem;
    text-align: left;
    font-size: 3rem;
    font-family: "Courier New", Courier, monospace;
}

/* Grid Cell: 'Status1' ------------------------------------------------------------------------------------- */

.status1Value {
    flex: 2 0 4rem;
    background-color: darkgray;
    color: black;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 2.5rem;
}


.injectionGuardValue[data-wica-channel-value-latest*="enabled" i],
.beamDumpControllerValue[data-wica-channel-value-latest*="0" i] ,
.machineInterlockSystemValue[data-wica-channel-value-latest*="0" i],
.vacuumControlSystemValue[data-wica-channel-value-latest*="0" i],
.fillingPatternFeedbackValue[data-wica-channel-value-latest*="ok" i],
.fillingPatternFeedbackInputValue[data-wica-channel-value-latest*="operating" i]
{
    background-color: limegreen;
}

.fillingPatternFeedbackInputValue[data-wica-channel-value-latest*="val:'off'" i]
{
    background-color: red;
}

/* Grid Cell: 'Status2' ------------------------------------------------------------------------------------ */

.status2Value {
    flex: 2 0 4rem;
    background-color: darkgray;
    color: black;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 2rem;
}

.gunValue[ data-wica-channel-value-latest*="ready" i],
.spbValue[ data-wica-channel-value-latest*="ok" i],
.a1Value[ data-wica-channel-value-latest*="ready" i],
.a2Value[ data-wica-channel-value-latest*="ready" i],
.boosterValue[ data-wica-channel-value-latest*="ok" i],
.sr1Value[ data-wica-channel-value-latest*="ok" i],
.sr2Value[ data-wica-channel-value-latest*="ok" i],
.sr3Value[ data-wica-channel-value-latest*="ok" i],
.sr4Value[ data-wica-channel-value-latest*="ok" i],
.threeHcValue[ data-wica-channel-value-latest*="ok" i]
{
    background-color: limegreen;
}

/* Grid Cell: 'Status3' ------------------------------------------------------------------------------------ */

.status3Value {
    flex: 2 0 4rem;
    background-color: darkgray;
    color: black;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 2rem;
}

.injSeptum[ data-wica-channel-value-latest*="val:0"],
.injKicker[ data-wica-channel-value-latest*="val:0"],
.extrKicker[ data-wica-channel-value-latest*="val:0"],
.extrSeptum[ data-wica-channel-value-latest*="val:0"],
.thinSeptum[ data-wica-channel-value-latest*="val:0"],
.kickersBump[ data-wica-channel-value-latest*="val:0"],
.dumpKickers[ data-wica-channel-value-latest*="val:0"]
{
    background-color: red;
}

.injSeptum[ data-wica-channel-value-latest*="val:1"],
.injKicker[ data-wica-channel-value-latest*="val:1"],
.extrKicker[ data-wica-channel-value-latest*="val:1"],
.extrSeptum[ data-wica-channel-value-latest*="val:1"],
.thinSeptum[ data-wica-channel-value-latest*="val:1"],
.kickersBump[ data-wica-channel-value-latest*="val:0"],
.dumpKickers[ data-wica-channel-value-latest*="val:0"]
{
    background-color: limegreen;
}

/* Grid Cell: 'Status4' ------------------------------------------------------------------------------------ */

.status4Label {
    flex: 2 0 6rem;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin-left: 1rem;
    margin-right: 1rem;
}

.status4Value {
    background-color: limegreen;
    flex: 2 0 6rem;
    text-align: center;
    font-size: 2.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Grid Cell: 'Plot1', 'Plot2' ----------------------------------------------------------------------------- */

cas-wica-plot-basic-xy {
    display: block;
    margin: 0.1rem;
    width: 100%;
    height: 90%;
}