/* Variables */
:root {
    --default-text-color: #182026;
    --darker-bg-color: rgb(242, 243, 245);
    --success-bg-color: rgba(35, 133, 81, 0.1);
    --warning-bg-color: rgba(200, 118, 25, 0.1);
    --danger-bg-color: rgba(205, 66, 70, 0.1);
    --warning-color: #bf7326;
    --danger-color: #ac2f33;
    --success-color: #0a6640;

    --imi-stone4: #f5f6f5;
    --imi-purple: #441f54;
    --imi-teal: #1f607c;
}

/* Reset UL */
ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    margin-bottom: 10px;
    /* To match the margin set by blueprint on a <p> */
}

/* Fonts */

@font-face {
    font-family: "MuseoSans Thin";
    src: url("../fonts/museosans-100.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "MuseoSans Light";
    src: url("../fonts/museosans-300.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "MuseoSans Regular";
    src: url("../fonts/museosans-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "MuseoSans Bold";
    src:
        url("../fonts/museosans-700.woff2") format("woff2"),
        url("../fonts/museosans-700.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}

/* Overwrite tippy theme */
.tippy-box[data-theme~="light"] {
    color: #26323d;
    box-shadow:
        0 0 20px 4px rgba(154, 161, 177, 0.15),
        0 4px 80px -8px rgba(36, 40, 47, 0.25),
        0 4px 4px -2px rgba(91, 94, 105, 0.15);
    background-color: #fff;
}

.tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
    border-top-color: #fff;
}

.tippy-box[data-theme~="light"][data-placement^="bottom"]
    > .tippy-arrow:before {
    border-bottom-color: #fff;
}

.tippy-box[data-theme~="light"][data-placement^="left"] > .tippy-arrow:before {
    border-left-color: #fff;
}

.tippy-box[data-theme~="light"][data-placement^="right"] > .tippy-arrow:before {
    border-right-color: #fff;
}

.tippy-box[data-theme~="light"] > .tippy-backdrop {
    background-color: #fff;
}

.tippy-box[data-theme~="light"] > .tippy-svg-arrow {
    fill: #fff;
}

/* Generic components and classes */

textarea {
    /* Fixes #54  */
    font-family: inherit;
}

.hidden {
    display: none;
}

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

.hy-mt-0 {
    margin-top: 0;
}

.hy-mt-20 {
    margin-top: 20px;
}

.hy-mt-10 {
    margin-top: 10px;
}

.hy-mb-20 {
    margin-bottom: 20px;
}

.hy-ml-20 {
    margin-left: 20px;
}

.hy-mr-20 {
    margin-right: 20px;
}

.hy-p-20 {
    padding: 20px;
}

.hy-pt-20 {
    padding-top: 20px;
}

.hy-pb-20 {
    padding-bottom: 20px;
}

.hy-pl-10 {
    padding-left: 10px;
}

.hy-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.hy-row.hy-stretch-children > .hy-col > :first-child {
    height: 100%;
}

.hy-row > .hy-col {
    /* distribute the space between all children */
    flex-grow: 1;
    flex-basis: 0;
    margin-right: 10px;
    padding-right: 20px;
}

.hy-row > .hy-col.hy-col-eighth {
    flex-grow: 0.125;
}

.hy-row > .hy-col.hy-col-third {
    flex-grow: 0.66;
}

.hy-row > .hy-col.hy-col-quarter {
    flex-grow: 0.25;
}

.hy-row > .hy-col:last-child {
    margin-right: 0;
    padding-right: 0;
}

.no-min-width {
    /* This is useful for the graph and their sizing problem */
    /* https://makandracards.com/makandra/66994-css-flex-and-min-width */
    min-width: 0;
}

.hy-ul-bullet {
    list-style: circle;
    padding-left: 20px;
}

.hy-col img {
    max-width: 100%;
}

.hy-default-cursor {
    cursor: default;
}

/* Align all items on a row by the center. Useful to align text with an icon */
.hy-center-align {
    display: flex;
    align-items: center;
}

.bp3-heading .bp3-ext-lighter {
    color: #5c7080;
    font-size: 66%;
}

/* Put the bullets back  */
ul.hy-bullets {
    list-style-type: circle;
    list-style-position: inside;
}

ul.hy-bullets li {
    margin-bottom: 0.5em;
}

a.hy-outside::after {
    font-family: "Icons16", sans-serif;
    font-size: 0.6em;
    font-style: normal;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #5c7080;
    vertical-align: top;
    margin-inline-start: 0.3em;

    /* 'document-share' blueprint icon */
    content: "";
}

/* hy-box mimics the look and feel of a blueprint table with a title */

.hy-box .header {
    font-weight: 600;
    padding: 11px;
    margin: 0px;
    text-align: left;
}

.hy-box .content {
    border-top: 1px solid rgba(16, 22, 26, 0.15);
    border-bottom: 1px solid rgba(16, 22, 26, 0.15);
    padding: 11px;
}

/* Cards with a vertical title */

.hy-card {
    display: flex;
    padding: 20px 20px 20px 0;
    /* no padding for the title */
}

.hy-card-title {
    color: #e5e5ea;
    text-transform: uppercase;
    font-weight: bold;
    font-size: large;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: start;
    margin-right: 10px;
}

.hy-card-content {
    flex-grow: 1;
    margin-left: 10px;
}

/* Blueprint 3 small extensions (prefix: "ext-bp3-" */

/* The top border on a bp3 html table is actually a box-shadow on the cells
 of the first row */
table.bp3-html-table.no-border tbody tr:first-child td {
    box-shadow: none;
}

#content table.no-border,
table.bp3-html-table.no-border {
    border-bottom: none;
}

/* Login screen */

#public {
    background: url("/assets/images/ta-smart-background-1024.webp") no-repeat
        center center fixed;
    background-size: cover;
}

@media only screen and (min-width: 1300px) {
    /* Large screen, non-retina */
    #public {
        background: url("/assets/images/ta-smart-background-1920.webp")
            no-repeat center center fixed;
        background-size: cover;
    }
}

@media only screen and (min-width: 1300px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1300px) and (min-resolution: 192dpi),
    only screen and (min-width: 2000px) {
    /* Medium size screen Retina and Large screen */

    #public {
        background: url("/assets/images/ta-smart-background-3072.webp")
            no-repeat center center fixed;
        background-size: cover;
    }
}

#public #logged-out-container,
#public #logo-banner {
    --width: 80%;
}

@media only screen and (min-width: 1100px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1100px) and (min-resolution: 192dpi),
    only screen and (min-width: 1100px) {
    /* Medium size screen Retina and Large screen */
    #public #logged-out-container,
    #public #logo-banner {
        --width: 1100px;
    }
}

#logo-banner img {
    height: 30px;
}

#public #logged-out-container,
#public #logo-banner {
    align-self: center;
    margin-top: 20px;
    width: var(--width);
}

#public #logged-out-container h1 {
    margin-top: 0;
}

/* General Layout */

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: space-between;
}

#app {
    /* As an element of body */
    flex-grow: 2;
    /* default 0 */

    /* to avoid the footer that takes the whole screen */
    min-height: 75vh;

    /* As a container */
    display: flex;
    flex-direction: column;
}

#ernd-bypass-banner {
    min-height: 3em;
    padding: 20px;
    background-color: orangered;
    text-align: center;
    color: white;
    font-weight: bolder;
}

#masquerading-banner {
    min-height: 3em;
    padding: 20px;
    background-color: #ac2f33;
    text-align: center;
    color: white;
    font-weight: bolder;
}

#masquerading-banner form {
    display: inline;
}

#content {
    margin: 0 20px;
    /* so we have a margin on smaller screen */
    padding-bottom: 30px;
    flex-grow: 2;
}

section {
    margin: 1em 0;
}

.sidemenu {
    background-color: var(--darker-bg-color);
    margin-top: 1em;
    padding: 0 1em;
}

/* Staging-only banner */

#staging-banner {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 50px;
    background-color: red;
    color: white;
    font-weight: bolder;
    font-size: larger;
}

#staging-banner label {
    margin-inline-start: 20px;
    justify-self: end;
    cursor: pointer;
    font-size: smaller;
}

#hide-staging-banner {
    display: none;
}

#hide-staging-banner:checked ~ #staging-banner {
    display: none;
}

/* Navigation Bar */

nav {
    background-color: var(--imi-stone4);
    padding: 10px 20px;
    margin-bottom: 8px;
}

nav a.logo {
    text-decoration: none;
}

nav a.logo img {
    height: 30px;
    /* which is the size of the blueprint buttons */
}

nav a.logo img:first-child {
    border-right: 1px solid #5c7080;
    padding-right: 15px;
}

nav span.notification-sticker {
    background-color: red;
    color: white;
    padding: 0.1em;
    min-width: 1.5em;
    margin-top: -1em;
    text-align: center;
    border-radius: 1em;
    font-size: smaller;
    font-weight: bolder;
}

/* Footer */

footer {
    font-family: "MuseoSans Regular";
    background: var(--imi-purple) !important;
    color: var(--imi-stone4);
    padding-top: 80px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
}

#footer-content {
    --width: 80%;
}

@media only screen and (min-width: 1100px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1100px) and (min-resolution: 192dpi),
    only screen and (min-width: 1100px) {
    /* Medium size screen Retina and Large screen */
    footer-content {
        --width: 1100px;
    }
}

#footer-content {
    align-self: center;
    margin: 0 20px;
    width: var(--width);
}

#footer-content a {
    color: var(--imi-stone4);
}

footer img.imi-logo {
    width: 170px;
    height: auto;
}

footer .company-values p {
    line-height: 1.6rem;
}

footer .imi-plc,
footer .climate-control,
footer .social {
    font-family: "MuseoSans Light";
}

footer .imi-plc ul li,
footer .climate-control ul li {
    line-height: 2rem;
}

footer .social .links a:not(:first-child) {
    margin-inline-start: 12px;
}

footer .social .links a svg {
    color: white;
    height: 16px;
}

footer .legal {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid;
    font-family: "MuseoSans Light";
    font-size: smaller;
}

footer .legal .links a {
    color: white;
    margin-left: 12px;
}

/* Flashes */

#flashes {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    margin-top: 1em;
}

#flashes div.flash {
    margin: 10px 0;
    margin-top: 0px;
}

/* HTML Select */

select.hy-select {
    /* Mostly from .bp3-input */
    background: #ffffff;
    border: none;
    border-radius: 3px;
    box-shadow:
        0 0 0 0 rgba(19, 124, 189, 0),
        0 0 0 0 rgba(19, 124, 189, 0),
        inset 0 0 0 1px rgba(16, 22, 26, 0.15),
        inset 0 1px 1px rgba(16, 22, 26, 0.2);
    color: #182026;
    font-size: 14px;
    font-weight: 400;
    height: 30px;
    line-height: 30px;
    outline: none;
    padding: 0 10px;
}

/* Tables */

#content table {
    width: 100%;

    /* same as separator */
    /* border-bottom: 1px solid rgba(16, 22, 26, 0.15);
    margin-bottom: 10px; */
}

#content table td img.cell-image {
    /* So we don't modify the height of the row because of the image size.
        11px is the padding of a <td> regular cell in blueprint.
     */
    height: 2em;
    margin: -11px 0;
}

#content table.hy-align-last-end tbody td:last-child,
#content table.hy-align-last-end thead th:last-child {
    text-align: end;
}

table.hy-interactive tbody tr:hover td {
    background-color: rgba(191, 204, 214, 0.3);
}

table.hy-interactive tbody tr:active td {
    background-color: rgba(191, 204, 214, 0.4);
}

table td form,
table td p {
    display: inline-block;
}

/* Remove the border on top of the first row of a bp3-html-table */
table.bp3-html-table.hy-no-first-row-border tbody tr:first-child th,
table.bp3-html-table.hy-no-first-row-border tbody tr:first-child td,
table.bp3-html-table.hy-no-first-row-border tfoot tr:first-child th,
table.bp3-html-table.hy-no-first-row-border tfoot tr:first-child td {
    box-shadow: none;
}

/* Specific styling */

#content div.actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

#content div.empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    height: 140px;
    /* border: 1px solid red; */
    text-align: center;
}

form div.hy-form-row {
    margin-bottom: 5px;
    /* arbitrary */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

form div.hy-form-row input {
    /* The input field grows instead of the label */
    width: 66%;
}

.hy-deprecated-banner {
    background-color: lightcoral;
    color: white;
    font-weight: bold;
    font-size: bigger;
    text-align: center;
    margin: 20px;
    padding: 20px;
}

.hy-centered-flex {
    display: flex;
    align-items: center;
}

.hy-gap-10 {
    gap: 10px;
}

/* Terms of Use */

.terms-of-use-content ul {
    list-style-type: disc;
    padding-inline-start: 1em;
}

/* Unordered list in tooltip */

ul.tooltip {
    padding-top: 10px;
    padding-right: 16px;
}

ul.tooltip li {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5em;
}

/* Unassigned valves */

table#unassigned tr {
    cursor: pointer;
}

/* Project Settings */

#project-map-holder {
    width: 100%;
    height: 500px;
}

#project-banner {
    min-height: 300px;
    background: no-repeat;
    background-position: center center;
    background-size: cover;
}

#geocoding-failed-message {
    margin: 2em 0;
}

/* Export Widget */

.export-form {
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: min-content max-content;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}

.export-form label {
    grid-column: 1 / 2;
    font-weight: bold;
    text-align: right;
}

.export-form input {
    grid-column: 2 / 3;
}

/* Project pages */

#project-menu select {
    border: none;
    padding: 8px;
    width: 100%;

    option {
        border: none;
        padding: 8px;
    }
}

/* Project Dashboard Page */

.devices-summary {
    .not-displayed {
        display: none;
    }

    table thead tr th:first-child {
        min-width: 25%;
    }

    table {
        tfoot {
            font-weight: bolder;
            background-color: var(--darker-bg-color);
            vertical-align: middle;
        }
    }
}

/* TA-Smart Dashboard Page */

div#livefeed-container {
    width: 90%;
    margin: 0 auto;
    max-width: 2000px;
    /* to avoid a huge viz on big screens */
}

#latest-update-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

#latest-update-label .countdown-timer {
    margin-left: 10px;
    height: 1em;
    width: 1em;
}

div.data-graph {
    text-align: center;
}

div.data-graph > svg {
    width: 90%;
    height: auto;
    margin: auto;
}

div.no-graph {
    min-height: 400px;
}

form.graph-control .controls {
    display: flex;
    align-items: baseline;
}

form.graph-control .controls > div {
    margin-right: 20px;
}

.health-box p.status {
    display: flex;
    background-color: var(--darker-bg-color);
    border: 1px solid transparent;
    padding: 8px;
    border-radius: 8px;
}

.health-box p.status .icon {
    margin-right: 8px;
}

.health-box p.status.bp3-intent-success {
    background-color: var(--success-bg-color);
}

.health-box p.status.bp3-intent-warning {
    background-color: var(--warning-bg-color);
    cursor: pointer;
}

.health-box p.status.bp3-intent-warning.selected {
    border: 1px solid var(--warning-color);
}

.health-box p.status.bp3-intent-danger {
    background-color: var(--danger-bg-color);
    cursor: pointer;
}

.health-box p.status.bp3-intent-danger.selected {
    border: 1px solid var(--danger-color);
}

.health-box ul.details {
    margin-top: 10px;
}

/* TA-Smart Charts Page */

.vega-container {
    width: 100%;
}

div.tasmart-charts .chart-bounds {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

div.tasmart-charts .overview-graph {
    margin-top: 2em;
}

div.graph-parameters-box {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

div.graph-parameters-box .presets {
    display: flex;
    align-items: center;
}

div.graph-parameters-box .presets span.reset {
    font-weight: bolder;
    margin-right: 1em;
}

div.graph-parameters-box .phystype .details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.graph-parameters-box .phystype.inactive {
    color: lightgray;
}

div.graph-parameters-box .phystype .details span.position {
    width: 1em;
    color: darkgrey;
}

div.graph-parameters-box .phystype .details input.selection {
    width: auto;
    flex-grow: 0;
}

div.graph-parameters-box .phystype .details span.name {
    display: inline-block;
    flex-grow: 2;
    text-align: start;
}

div.graph-parameters-box .phystype .details span.unit {
    display: inline-block;
    width: 2em;
    font-weight: bold;
    flex-grow: 0;
}

div.graph-parameters-box .phystype .details span.tracker-value {
    display: inline-block;
    width: 4em;
    font-weight: bold;
    flex-grow: 0;
}

div.graph-parameters-box .phystype .position-selection {
    text-align: start;
    margin: 1em 1em;
}

div.graph-parameters-box .phystype .position-selection span.hint {
    font-style: italic;
}

div.graph-parameters-box ul.errors-list {
    margin-left: 10px;
    font-weight: bolder;
    list-style-type: circle;
}

div.graph-parameters-box .overview-var-selection {
    display: flex;
    align-items: center;
}

div.graph-parameters-box .overview-var-selection .title {
    flex-shrink: 1;
    font-weight: bolder;
    margin-right: 1em;
}

div.graph-parameters-box .overview-var-selection .selection {
    flex-shrink: 0;
}

/* TA-Smart Energy Page */

div.energy-chart-config {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.day-night-settings {
    margin-top: 12px;
    display: inline-grid;
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
}

.day-night-settings .grid-item-a-1 {
    grid-row: 1;
    grid-column: 1;
}

.day-night-settings .grid-item-a-1:after,
.day-night-settings .grid-item-b-1:after {
    content: ": ";
}

.day-night-settings.grid-item-a-2 {
    grid-row: 1;
    grid-column: 2;
}

.day-night-settings .grid-item-b-1 {
    grid-row: 2;
    grid-column: 1;
}

.day-night-settings .grid-item-b-2 {
    grid-row: 2;
    grid-column: 2;
}

/* SLD over MQTT Panel */

.sld-panel {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.sld-panel form {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.sld-panel form input {
    flex-grow: 2;
}

.sld-panel .response {
    margin-bottom: 12px;
    padding: 5px;
    background-color: var(--darker-bg-color);
}

/* Connection log */

.connection-events {
    max-width: 800px;
}

.connection-events li {
    margin: 10px;
    padding: 16px;
    min-height: 80px;
    background-color: var(--darker-bg-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.connection-events .timestamp {
    font-weight: bold;
    flex-shrink: 0;
}

.connection-events .event-details {
    flex-grow: 1;
    margin-inline-start: 32px;
}

.connection-events .event-details .event-type {
    font-weight: bolder;
}

/* Contacts & Invites */

.inline-forms form {
    display: inline;
}

/* Project Access  */

#access-tables-container tr.temporary-access {
    background-color: var(--darker-bg-color);
}

/* htmx in flight requests */

form.htmx-request,
form.htmx-request label,
form.htmx-request span,
form.htmx-request input,
form.htmx-request button {
    cursor: wait;
}

/* Device Project Actions in eR&D */

.device-project-actions {
    max-width: 920px;
}

.device-project-actions li {
    margin: 10px;
    padding: 16px;
    min-height: 80px;
    background-color: var(--darker-bg-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.device-project-actions .metadata {
    font-weight: bold;
    flex-shrink: 0;
}

.device-project-actions .event-details {
    flex-grow: 1;
    margin-inline-start: 32px;
}

.device-project-actions .event-details .event-type {
    font-weight: bolder;
}

/* Device List in eR&D */

#ernd-device-list {
    tr.replaced-valve {
        text-decoration: line-through;
    }
}

/* eR&D User List */

#users {
    /* each row */
    & > :nth-child(odd) {
        background-color: var(--darker-bg-color);
    }

    div.basic {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px;

        & > :nth-child(1) {
            /* Email */
            width: 25%;
        }

        & > :nth-child(2) {
            /* Name */
            width: 20%;
        }

        & > :nth-child(3) {
            /* Company & Position */
            width: 20%;
        }

        & > :nth-last-child(1) {
            flex-shrink: 2;
            flex-grow: 2;
            text-align: right;
        }
    }

    div.details {
        background-color: white;
        padding: 8px;

        div.user-caps {
            ul {
                & > :nth-child(odd) {
                    background-color: var(--darker-bg-color);
                }
                li {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    padding: 8px;

                    & > :nth-child(1) {
                        /* capability name */
                        width: 50%;
                    }

                    & > :nth-last-child(1) {
                        flex-shrink: 2;
                        flex-grow: 2;
                        text-align: right;
                    }
                }
            }
        }
    }
}

/*
    Used both in 'Unconfirmed HyTune App Instance ID section and within the
    details of a user
*/
div.hytune-instances {
    ul {
        & > :nth-child(odd) {
            background-color: var(--darker-bg-color);
        }
        li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 8px;

            & > :nth-child(1) {
                /* device */
                width: 25%;
            }

            & > :nth-child(2) {
                /* Status */
                width: 25%;
            }

            & > :nth-last-child(1) {
                flex-shrink: 2;
                flex-grow: 2;
                text-align: right;
            }
        }
    }
}

#pcba-repro-inner {
    li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px;

        form {
            display: inline-block;
        }

        & > * {
            width: 20%;
        }

        & > :nth-last-child(1) {
            flex-grow: 2;
            text-align: right;
            flex-basis: content;
        }
    }
}

.tasmart-configuration {
    .shadow-status {
        &.bp3-intent-success {
            background-color: var(--success-bg-color);
            color: var(--success-color);
        }

        &.bp3-intent-warning {
            background-color: var(--warning-bg-color);
            color: var(--warning-color);
        }

        &.bp3-intent-danger {
            background-color: var(--danger-bg-color);
            color: var(--danger-color);
        }

        .summary {
            padding: 12px;
            display: flex;
            gap: 12px;
        }

        .details {
            ul {
                list-style: circle inside;
                padding: 0;
            }
        }
    }
}

/* CSS Playground */