/*
Copyright (C) 2021 The Home Control Authors

This program is free software: you can redistribute it and/or modify
it under the terms of version 3 of the GNU Affero General Public License
as published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

:root {
    --bg:  rgb(47,47,47);
    --text: rgb(198,213,210);
    --enabled: rgb(66, 187, 243);
    --error: rgb(255, 12, 0);
    --success: rgb(76, 242, 92);
    --warning: rgb(243, 217, 0);
    --bg-edit: gray;
}

html {
    font-family: sans-serif;
    background-color: var(--bg);
}

/* TODO: ggf. mit media querys anpasse*/
#middle {
    max-width: 1200px; 
    margin: 0 auto;
}

#content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.thing {
    color: var(--text);
    display: inline-block;
    width: 7rem;
    user-select: none;
}

.thing-detail {
    width: 6rem;
    height: 6rem;
    border: 1px solid var(--text);
    padding: 0.25rem;
    margin: 0.25rem auto;
    position: relative;
}

.timed-out .thing-name span[name="name"]::after {
    color: var(--error);
    font-weight: bolder;
    content: "\00a0!";
}

.timeout-unknown .thing-name span[name="name"]::after {
    color: var(--warning);
    content: "\00a0?";
}

.thing-value {
    text-align: center;
    font-size: 18pt;
    position: relative;
    margin: auto;
    top: 40%;
    transform: translateY(-50%);
}

.thing-value span {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.thing-name {
    text-align: center;
    font-size: 10pt;
    text-align: center;
    margin: auto;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.thing-shelly input[type="checkbox"], .thing-switch input[type="checkbox"], .thing-shellyplus input[type="checkbox"] {
    display: none;
}

#top {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--text);
    margin-bottom: 10px;
}

#menu {
    max-width: 1200px; 
    margin: 0 auto;
}

ul#bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
  
#bar li {
    float: left;
    
}

#bar li.active {
    background-color: var(--enabled);
}

#bar li:last-child {
    border-right: none;
  }
  
#bar li a {
    display: block;
    color: var(--text);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#bar li a:hover {
    background-color: var(--enabled);
}

.toggle {
    float: left;
    display: none;
}

@media screen and (max-width: 600px) { 
    ul#bar li.menu-item {
        float: none;
        display: none;
        border-right: none;
    }
    .toggle {
        display: block;
    }
  }

/* Change the link color to #111 (black) on hover */
#bar li a:hover {
    background-color: var(--enabled);
}

li#status, li#settings, li#logout, li#login, li#rules, li#timers{
    display: block;
    color: var(--text);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: right;
}

.pending {
    border-color: var(--enabled);
}

.on {
    background-color: var(--enabled);
    color: black;
}

.off {
}

.thing-grid {
    display: grid;
}

.thing-grid-item {
    grid-row: 1;
}

.feather {
  width: 12pt;
  height: 12pt;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feather-fill {
    fill: var(--text) !important; 
}

.feather-big {
  width: 18pt;
  height: 18pt;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.center-outer {
    display: flex;
    justify-content: space-around;

}

.overlay {
    z-index: 1;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.dialog-frame {
    position: inherit;
    display: block;
}

.dialog {
    font-size: 12pt;
    color: var(--text);
    padding: 1rem;
    margin: 1rem;
    background-color: var(--bg);
    border: 1px solid var(--text);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: left;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}

.dialog .label {
    display: inline-grid;
}

.dialog .control {
    display: inline-grid;
}

.dialog .single {
    grid-column: span 2;
}

.four-columns {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
}

.dialog input[type=checkbox] {
    display: none;
}

.countdown {
    width: 6em;
    text-align: right;
}

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;

}

input, button, select {
    padding: 2px;
    font-family: sans-serif;
    font-size: 12pt;
    outline: none;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid rgb(99,99,99);
}

option:checked {
    background-color: var(--enabled);
    color: var(--bg)
}

input:focus, button:focus, select:focus {
    outline: none;
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: 0;
}

.dialog button {
    padding: 5px;
    color: white;
    background-color: rgb(14,14,14);
    border-width: 1px;
    border-style: solid;
    border-left-color: rgb(21,21,21);
    border-top-color: rgb(29,29,29);
    border-right-color: rgb(13,13,13);
    border-bottom-color: rgb(13,13,13);
}

/*@media screen and (min-width: 600px) {
    .dialog {
        margin: 10rem;
    }
}*/

.dialog label {
    margin-right: 1rem;
}

.edit {
    color: var(--text);
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 5px;    display: none;
}

.on .edit {
    color: var(--bg);
}

.invisible {
    display: none !important;
}

.invisible-edit .thing-detail, .thing-add .thing-detail {
    /*border-style: dashed;*/
    background: var(--bg-edit);
    color: var(--text);
}

.flash-warning {
    background-color: var(--warning);
    color: var(--bg)
}

.flash-success {
    background-color: var(--success);
    color: var(--bg)
}

.flash-error {
    background-color: var(--error);
    color: var(--text)
}

.flash {
    padding: 1rem;
    display: block;
    z-index: 1;
    top: 1rem;
    width: 75%;
    margin: 0.25rem auto;
    border-radius: 5px;
}

.flash-close-button {
    float: right;
    font-weight: bold;
}

.flash button {
    background-color: inherit;
    color: inherit;
    border: none;
    text-decoration: underline;
}

.flash button:hover {
    color: white
}

.flash-message {
    padding-right: 0.5rem;
}