* {
    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 */
}

header {
    text-align: center;
}

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

.flex-new-row {
    width: 100%;
    background-color: bisque;
    height: 0;
}
.truncatable {
    overflow-x: hidden;
    text-wrap: nowrap;
}


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

.Main           { grid-area: Main;           overflow: hidden; display: block }
.Bunches        { grid-area: Bunches;        overflow: hidden; display: block }
.Messages       { grid-area: Messages;       overflow: hidden; display: block }
.Laser          { grid-area: Laser;          overflow: hidden; display: block }
.SoftMps        { grid-area: SoftMps;        overflow: hidden; display: block }
.Vacuum         { grid-area: Vacuum;         overflow: hidden; display: block }
.Mps            { grid-area: Mps;            overflow: hidden; display: block }
.Aramis         { grid-area: Aramis;         overflow: hidden; display: block }
.Athos          { grid-area: Athos;          overflow: hidden; display: block }
.ElectronEnergy { grid-area: ElectronEnergy; overflow: hidden; display: block }
.Camera         { grid-area: Camera;         overflow: hidden; display: block }
.RfStation1     { grid-area: RfStation1;     overflow: hidden; display: block }
.RfStation2     { grid-area: RfStation2;     overflow: hidden; display: block }
.Plot           { grid-area: Plot;           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-rows:    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Main            Bunches   '
                              'Messages        Messages  '
                              'Aramis          Athos     '
                              'Plot            Plot      '
                              'Plot            Plot      '
                              'Plot            Plot      '
                              'Camera          Camera    '
                              'Laser           Laser     '
                              'ElectronEnergy  Mps       '
                              'Vacuum          SoftMps   '
                              'RfStation1      RfStation1'
                              'RfStation1      RfStation1'
                              'RfStation2      RfStation2'
                              'RfStation2      RfStation2';
        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 );
    }
}

@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.   */
    /* The main difference compared to the portrait mode is that the 'Rf stations' cells fit on one row.  */
    .grid-container {
        display: grid;
        height: 600vh;
        grid-template-rows:    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Main            Bunches   '
                              'Messages        Messages  '
                              'Aramis          Athos     '
                              'Plot            Plot      '
                              'Plot            Plot      '
                              'Plot            Plot      '
                              'Camera          Camera    '
                              'Laser           Laser     '
                              'ElectronEnergy  Mps       '
                              'Vacuum          SoftMps   '
                              'RfStation1      RfStation1'
                              'RfStation1      RfStation1'
                              'RfStation2      RfStation2'
                              'RfStation2      RfStation2';
        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) {

    /* 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: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows:    1fr 1fr 1fr 1fr 1fr;
        grid-gap: 0.2rem;
        grid-template-areas:  'Main      Main      Bunches  Bunches Camera          Camera          Mps         Mps       '
                              'Messages  Messages  Aramis   Athos   Laser           Laser           SoftMps     SoftMps   '
                              'Plot      Plot      Plot     Plot    ElectronEnergy  ElectronEnergy  Vacuum      Vacuum    '
                              'Plot      Plot      Plot     Plot    RfStation1      RfStation1      RfStation2  RfStation2'
                              'Plot      Plot      Plot     Plot    RfStation1      RfStation1      RfStation2  RfStation2';
    }


    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: 'Shared' -------------------------------------------------------------------------------------- */

    .mainContainer, .bunchesContainer, .laserContainer,  .softMpsContainer, .messageContainer, .mpsContainer,
    .aramisContainer, .athosContainer, .cameraContainer, .vacuumContainer, .electronEnergyContainer,
    .plotContainer, .rfStationContainer
    {
        background-color: lightgray;
        display: flex;
        height: 100%;
        justify-content: space-between;
        flex-flow:row wrap;
        align-content: space-between;
        align-items: center;
        padding: 0.5rem 0.5rem 1rem;
    }

    .mainHeader, .bunchesHeader, .laserHeader, .softMpsHeader, .messageHeader, .mpsHeader,
    .aramisHeader, .athosHeader, .cameraHeader, .vacuumHeader, .electronEnergyHeader,
    .plotHeader, .rfStationHeader {
        color: darkblue;
        flex: auto;
        height: 2rem;
        text-align: center;
    }


/* Grid Cell: 'Main' ---------------------------------------------------------------------------------------- */

.mainStatusLabel {
    color: darkblue;
    flex: 0 0 7rem;
    text-align: right;
    margin-right: 1rem;
}

.mainStatusValue {
    flex: 2 0 10rem;
    background-color: lightyellow;
    color: black;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}


/* Grid Cell: 'Bunches' ------------------------------------------------------------------------------------- */

.bunchesLabel {
    color: darkblue;
    flex: 0 0 3rem;
    text-align: right;
    margin-right: 1rem;
}

.bunchesValue {
    flex: 2 0 4rem;
    background-color: lightyellow;
    color: black;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.bunchesValue[data-wica-channel-value-latest*="on" i] {
    background-color: limegreen;
}

.bunchesCharge {
    flex: 2 0 4rem;
    background-color: lightyellow;
    color: black;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}


/* Grid Cell: 'Laser' -------------------------------------------------------------------------------- */

.laserName {
    color: darkblue;
    flex: 2 0 4rem;
    text-align: center;
    margin-right: 1rem;
}

.laserDummy {
    flex: 0 0 4rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.laserLabel {
    color: darkblue;
    flex: 0 0 4rem;
    text-align: right;
    margin-right: 1rem;
}

.laserValue {
    flex: 2 0 4rem;
    background-color: lightyellow;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.laserShutterStatusLabel {
    color: darkblue;
    flex: 0 0 3rem;
    text-align: right;
}

.laserShutterStatusLed {
    flex: 0 0 1rem;
    background-color: red;
    color: transparent;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.laserShutterStatusLed[data-wica-channel-value-latest*="original" i],
.laserShutterStatusLed[data-wica-channel-value-latest*="1" i],
.laserShutterStatusLed[data-wica-channel-value-latest*="high" i],
.laserShutterStatusLed[data-wica-channel-value-latest*="not" i]
{
    background-color: limegreen;
}


/* Grid Cell: 'Messages' ------------------------------------------------------------------------------------ */

.messageLabel {
    color: darkblue;
    flex: 0 0 5rem;
    text-align: right;
    margin-right: 1rem;
}

.messageStatusLed {
    flex: 0 0 1.5rem;
    background-color: darkgray;
    color: transparent;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    overflow-x: hidden;;
}

.messageTimestamp {
    flex: 1 0 5rem;
    background-color: lightyellow;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.messageText {
    flex: 2 0 5rem;
    background-color: lightyellow;
    text-align: left;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.messageStatusLed[data-wica-channel-value-latest*="attended" i],
.messageStatusLed[data-wica-channel-value-latest*="preparation" i],
.messageStatusLed[data-wica-channel-value-latest*="remote" i] {
    background-color: limegreen;
}

.messageStatusLed[data-wica-channel-value-latest*="preparation" i]::first-letter {
    color: black;
    padding-left: 0.35rem;
}

.messageStatusLed[data-wica-channel-value-latest*="remote" i]::first-letter {
    color: black;
    padding-left: 0.35rem;
}

.messageStatusLed[data-wica-channel-value-latest*="attended" i]::first-letter {
    color: black;
    padding-left: 0.35rem;
}

/* Override EPICS alarm state so that the text is no longer displayed */
.messageStatusLed[data-wica-channel-alarm-state = '1'] {
    color: transparent !important;
}


/* Grid Cell: 'SoftMps' --------------------------------------------------------------------------------------- */

.softMpsRowLabel {
    color: darkblue;
    flex: 0 0 3rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    text-align: center;
    overflow-y: hidden;
}

.softMpsColLabel {
    color: darkblue;
    writing-mode: vertical-lr;
}

.softMpsStatusLed {
    flex: 0 0 1rem;
    background-color: red;
    color: transparent;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    overflow: hidden;
}

.softMpsStatusLed[data-wica-channel-value-latest*="0"] {
    background-color: limegreen;
}


/* Grid Cell: 'Mps' ----------------------------------------------------------------------------------------- */
.mpsRowLabel {
    color: darkblue;
    flex: 0 0 2rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    text-align: center;
    overflow-y: hidden;
}

.mpsColLabel {
    color: darkblue;
    writing-mode: vertical-lr;
}

.mpsStatusLed {
    flex: 0 0 1rem;
    background-color: red;
    color: transparent;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    overflow: hidden;
}

.mpsStatusLed[data-wica-channel-value-latest*="high" i] {
    background-color: limegreen;
}

.mpsStatusLed[data-wica-hidden], .mpsLabel[data-wica-hidden] {
    background-color: transparent;
}


/* Grid Cell: 'Aramis', 'Athos' ----------------------------------------------------------------------------- */

.aramisLabel, .athosLabel {
    color: darkblue;
    flex: 0 0 4.5rem;
    text-align: right;
    margin-left: 0.1rem;
    margin-right: 1rem;
}

.aramisMultiplier, .athosMultiplier {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.aramisValue, .athosValue {
    flex: 1 0 4rem;
    background-color: lightyellow;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}


/* Grid Cell: 'Camera' -------------------------------------------------------------------------------------- */

cas-wica-camera {
    display: block;
    margin: auto;
    width: 9rem;
    height: 9rem;
    pointer-events: none;  /* Suppress magnified view when pointer hovers over image */
}


/* Grid Cell: 'Vacuum' -------------------------------------------------------------------------------------- */

.vacuumLabel {
    color: darkblue;
    flex: 0 0 5rem;
    text-align: right;
    margin-right: 1rem;
}

.vacuumStatusLed {
    flex: 0 0 3rem;
    background-color: red;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    overflow-x: hidden;
}

.vacuumStatusLed[data-wica-channel-value-latest*="on" i] {
    background-color: limegreen;
}


/* Grid Cell: 'ElectronEnergy' ------------------------------------------------------------------------------ */

.electronEnergyLabel {
    color: darkblue;
    flex: 0 0 5rem;
    text-align: right;
    margin-right: 1rem;
}

.electronEnergyValue {
    flex: 2 0 5rem;
    background-color: lightyellow;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}


/* Grid Cell: 'Plot' ---------------------------------------------------------------------------------------- */

cas-wica-plot-dual-y {
    display: block;
    margin: 0.1rem;
    width: 100%;
    height: 50%;
}


/* Grid Cell: 'RfStation' ----------------------------------------------------------------------------------- */

.rfStation, .rfStationHeader {
    display: block;
    width: 100%;
}

.rfStationContent {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.rfStationLabel {
    color: darkblue;
    flex: 0 0 5rem;
    text-align: right;
    margin-right: 0.1rem;
    overflow-x: clip;
}

.rfStationStatusValue {
    flex: 0 0 6rem;
    background-color: lightyellow;
    text-align: right;
    margin-right: 0.1rem;
    overflow-x: clip;
    text-wrap: nowrap;
}

.rfStationStatusLed {
    flex: 0 0 1rem;
    background-color: darkgray;
    color: transparent;
    text-align: center;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    overflow-x: hidden;
    font-size: 0;
}

.rfStationStatusLed[data-wica-channel-value-latest*="ready" i] {
    background-color: limegreen;
}

.rfStationStatusLed[data-wica-channel-value-latest*="interlocked" i] {
    background-color: orange;
}

.rfStationDummy {
    flex: 0 0 4rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}