@import "normalise";

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 796px;
    height: 480px;
    font-family: sans-serif;
    font-size: 30px;
    background-color: black;
    color: white;
    user-select: none;
    overflow: hidden;
    position: relative;
}

button, .button {
    border-radius: 2px;
    background-color: dodgerblue;
    color: white;
    border: none;
    width: 70px;
    touch-action: none;
}

button:active, .button:active {
    transform: translate(1px,1px);
}

button:hover, .button:hover {
    opacity: 90%;
}

.entire-screen {
    position: relative;
    height: 100%;
    width: 100%;
}

.title-trail
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-bar {
    padding: 2px;
    border-bottom: 1px solid white;
    margin-bottom: 1px;
    position: relative;
    height: 40px;
}

.title-alarm {
    color: yellow;
    font-size: 24px;
}

.title-lock {
    font-size: 24px;
}

.page-content {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 435px;
}

table {
    border-collapse: collapse;
    font-size: 1em;
}

td {
    border: 1px solid silver;
}

%page-grid {
    display: grid;
    height: 100%;
    width: 100%;
    position: absolute;
    background: black;
}

.hide {
    display: none;
}

.screen-saver {
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: black;
}

.screen-saver-logo
{
    position: relative;
}



//////////////////////////////////////////////////////////////
// Home screen
// Row for the body and then four buttons
.home-grid {
    @extend %page-grid;
    grid-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 80px;
    grid-template-areas: "body body body body" "h1 h2 h3 h4";
}

// Column for the status list, big column for the graph
.home-body {
    grid-area: body;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 1fr;
    grid-template-areas: "list graphs";
}

.home-list {
    grid-area: list;
    border: 1px solid white;

    li {
        border-bottom: 1px solid silver;
        text-align: center;
    }
}

.home-graphs {
    grid-area: graphs;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "m0 m1";
    height: 100%;
    font-size: 0.7em;
}

%module-graph {
    //border: 1px solid white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.1em 1fr;
    grid-template-areas: "title title" "rf0 rf1";
}

.module-graph-0 {
    @extend %module-graph;
    grid-area: m0;
}

.module-graph-1 {
    @extend %module-graph;
    grid-area: m1;
}

.module-title {
    grid-area: title;
    text-align: center;
    border: 1px solid white;
    border-top: none;
}

%rf-graph {
    border: 1px solid white;
    display: grid;
    grid-template-rows: 1.1em 1fr 1.2em 1.1em;
    grid-template-areas: "rf-title" "if-graph" "if-title" "fibre-graph" ;
}

.rf-graph-0 {
    @extend %rf-graph;
    grid-area: rf0;
}

.rf-graph-1 {
    @extend %rf-graph;
    grid-area: rf1;
}

.rf-title {
    grid-area: rf-title;
    text-align: center;
    border-bottom: 1px solid white;
}
.if-title {
    border-top: 1px solid white;
    padding-top: 0.125rem;
    grid-area: if-title;
    text-align: center;
}

.rf-fibre-loss {
    grid-area: fibre-graph;
}

.rf-fibre-loss-bar {
    background-color: green;
    margin: 5px 0px 3px 0px;
    height: .6em;
}

.rf-graph-box {
    grid-area: if-graph;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.if-graph {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.half-width-graph {
    width: 50px;
}

.full-width-graph {
    width: 100px;
}

.if-graph .graph-holder {
    flex-grow: 1; // Make the graph-holder use all the available space
    position: relative;
}

.if-graph .graph-bar {
    position: absolute;
    bottom: 0;
    background-color: green;
    width: 100%;
}

.if-graph .graph-label {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.if-graph .snr-holder {
    font-size: 0.75em;
    background-color: silver;
    color: black;
    
}


.home-flags {
    grid-area: flags;
    position: relative;
    //border: 1px solid green;
    table {
        width: 100%;
        bottom: 0;
        position: absolute;
    }

    td {
        padding: 0 2px 0 2px;
    }
}

.front-button {
    font-size: 1em;
    width: 100%;
}

.front-button:disabled {
    background-color: silver;
}

#status-button {
    grid-area: h1;
}

#settings-button {
    grid-area: h2;
}

#system-button {
    grid-area: h3;
}


//////////////////////////////////////////////////////////////
// List screen (config/status)
.nav-button {
    width: auto;
    margin: 3px;
    font-size: 2em;
}

.config-grid {
    @extend %page-grid;
    grid-template-columns: 140px auto 140px;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "la body ra" "lb body rb" "lc body rc" "ld body rd";
}

.left-col {
    grid-area: 1 / 1 / 4 / 1;
}

.centre-col {
    grid-area: body;
}

.right-col {
    grid-area: 1 / 3 / 4 / 3;
}

#home-button {
    grid-area: ld;
}

#scroll-left {
    grid-area: la;
}

#scroll-right {
    grid-area: ra;
}

#scroll-up {
    grid-area: rc;
}

#scroll-down {
    grid-area: rd;
}

.title-position {
    position: absolute;
    right: 2px;
    top: 2px;
}

.menu-list {
    list-style: none; 
    padding: 1px;
    margin: 0;
    height: 100%;
    overflow-y: hidden;
}

.menu-list li {
    margin: 1px;
    border: 1px solid gray;
    padding: 0;
    position: relative;
}

.menu-title-name {
    height: 24px;
    font-size: 20px;
}

.menu-selection {
    font-size: 24px;
}

.menu-button {
    position: absolute;
    width: 54px;
    height: 54px;
    right: 2px;
    top: 2px;
    font-size: 24px;
    background-color: green;
}
//////////////////////////////////////////////////////////////
// List edit screen
.list-edit-grid {
    @extend %page-grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "la list ra" "lb list rb" "lc list rc" "ld list rd" "le list re";

    ul {
        grid-area: list;
        border: 1px solid silver;
        height: 100%;
        list-style: none;
        overflow-y: hidden;

        li {
            padding: 4px;
        }

        button {
            width: 100%;
            height: 60px;
            background: silver;
        }

        button.selected {
            background: dodgerblue;
        }
    }
}

.edit-button {
    width: auto;
    margin: 2px;
    font-size: 24px;
}

#list-edit-ok {
    grid-area: ra;
    background: green;
}

#list-edit-cancel {
    grid-area: la;
    background: red;
}

#list-edit-scroll-up {
    grid-area: rd;
}

#list-edit-scroll-down {
    grid-area: re;
}
//////////////////////////////////////////////////////////////
// Text edit screen
.text-edit-grid {
    @extend %page-grid;
    grid-template-columns: 1fr 70px;
    grid-template-rows: 65px 1fr;
    grid-template-areas: "edit ra" "button button";

    input {
        grid-area: edit;
        height: 60px;
        font-size: 30px;
        margin-top: 5px;
    }
}

#text-edit-back {
    grid-area: ra;
    margin: 4px 4px 0 4px;
    width: auto;
}

.text-key-holder {
    grid-area: button;
    display: grid;
    margin: 5px 2px 2px 2px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 5px;

    button {
        font-size: 24px;
        white-space: pre;
        width: auto;
    }
}

button.text-edit-ok {
    font-size: 36px;
    background: green;
}

button.text-edit-cancel {
    font-size: 36px;
    background: red;
}

@media (min-width: 820px) {
    body {
        border: solid 1px silver;
        margin: 5px;
    }
}
//////////////////////////////////////////////////////////////
// System screen
// Hide the actual file edit-control

// Misc pages (system, network, etc)
.misc-grid {
    @extend %page-grid;
    grid-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 80px;
    grid-template-areas: "body body body body" "h1 h2 h3 h4";
}

.misc-body {
    grid-area: body;
}

.home-button {
    font-size: 1.8em;
}

.system-info-list li {
    margin: 3px 5px 0 5px;
    padding: 4px;
    background-color: #222;
}

.system-info-list label:first-child {
    min-width: 260px;
    display: inline-block;
}

.system-info-list a, .system-info-list a:visited {
    text-decoration: none;
    color: blue;
}

.system-logging-switch {
    transform: scale(1.5);
}

.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.input-file + label {
    // Override the system-info-list label selector
    width: auto;
    color: white;
    background-color: dodgerblue;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 2px;
}

#upgrade-form {
    display: inline;
}

// A link styled to look like a button with no fixed height
.button-link, .button-link:visited, .button-link:link {
    text-decoration: none;
    border-radius: 2px;
    background-color: dodgerblue;
    color: white;
    border: none;
    touch-action: none;
    text-align: center;
}


// A link styled to look like a button with no fixed height (log-file button)
.log-link, .log-link:visited, .log-link:link {
    text-decoration: none;
    border-radius: 2px;
    background-color: dodgerblue;
    color: white;
    border: none;
    touch-action: none;
    text-align: center;
    line-height: 80px;
}


////////////////////////////////////////////////////////////////
.message-box {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background-color: black;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    border: solid 2px white;
    align-items: center;
    align-content: space-between;
}

//////////////////////////
// Alarm page

.alarm-list {
    grid-area: body;
    list-style: none;
    padding: 1px;
    margin: 0;
    height: 100%;
    overflow-y: hidden;
}

.alarm-list li {
    height: 2.6em;
    margin: 1px;
    font-size: 0.7em;
    border: 1px solid gray;
    padding: 2px;
    position: relative;
    overflow: hidden;
}

//////////////////////////////////
// Network page

.network-grid {
    margin: 10px;
    display: grid;
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "x p6 p5 p4" "fr a b c" "rr a b c" "y p1 p2 p3";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.netport {
    border: 1px solid white;
    text-align: center;
    padding: 3px;
}

.network-buttons {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.network-buttons button {
    font-size: 1em;
    width: 160px;
    height: 80px;
}

/*
.back-button {
    font-size: 1em;
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 120px;
    height: 80px;
}
*/

.error {

    color: red;
}

/////////////////////////////////////////////////////////////

.preview-image {
    width: 586px;
    height: 330px;
    background-color: #222;  
    margin: 5px auto 0px auto;
    display: block;
}

/////////////////////////////////////////////////////////////
// Reconnection logic

#components-reconnect-modal {
    height: 100%;
    width: 100%;
    position: absolute;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.85);
    top: 0;
    flex-direction: column;

    &.components-reconnect-show, &.components-reconnect-failed, &.components-reconnect-rejected {
        display: flex;
    }

    &.components-reconnect-hide {
        display: none;
    }
}

#connection-marker {
    white-space: pre;
}

////////////////////////////////////////////////////////////////////////////
// Utility styles (this is a poor-man's TailwindCSS, but it should be
// compatible if we decide to move to real Tailwind eventually

.w-32 {
    width: 8rem;
}
.w-40 {
    width: 10rem;
}
.min-w-40 {
    min-width: 10rem;
}
.w-auto {
    width: auto;
}
.w-48 {
    width: 12rem;
}
.w-64 {
    width: 16rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-32 {
    height: 8rem;
}


.centre {
    text-align: center;
}
.p-2 {
    padding: 0.5rem;
}
.p-4 {
    padding: 1rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}

.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-4 {
    margin-left: 1.0rem;
} 
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mr-8 {
    margin-right: 2rem;
}

.my-4 {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-4 {
    margin-top: 1.0rem;
}
.text-white { 
    color: white;
}
.text-grey {
    color: #666;
}
.text-sm {
    font-size: 24px;
}
.font-bold {
    font-weight: bold;
}
.flex {
    display: flex;
}
.grow {
    flex-grow: 1;
}
.items-center {
    align-items: center;
}
.text-center {
    text-align: center;
}
.flex-col {
    flex-direction: column;
}
.justify-center
{
    justify-content: center;
}
.gap-2
{
    gap: 0.5rem;
}
.gap-4
{
    gap: 1rem;
}
.gap-8
{
    gap: 2rem;
}


.inline-block {
    display: inline-block;
}

