/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

.wp-signals-alert {
    display: none;
    position: fixed;
    z-index: 30;
    padding-top: 20vh;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);

    & .form-group {
        width: auto !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }

    & .alert-contents {
        background-color: #fefefe;
        margin: auto;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;

        & h3 {
            margin: 0;
            padding: 20px 20px;
            padding-left: 60px;
            background-position: 20px center;
            background-repeat: no-repeat;
            background-size: 26px 26px;
            background-image: url("../assets/icons/warning-sign.png");

            background-color: #f3f3f3;
        }

        & p, & div {
            padding: 20px;
            font-size: 15px;
            line-height: 1.75;
        }
    }

    & .alert-contents::after {
        content: "";
        clear: both;
        display: table;
    }

    & span.close {
        color: #aaa;
        float: right;
        margin: 20px 20px 20px 20px;
        font-size: 28px;
        font-weight: bold;
    }

    & button.confirm {
        margin: 20px 20px 20px 20px;
        padding: 6px 15px;
        display: inline-block;
        background-color: #cfe0d4;
        border: 1px solid #2b5031;
        float: right;
    }

    & button.close {
        margin: 20px 20px 20px 0px;
        padding: 6px 15px;
        display: inline-block;
        float: right;
    }

    & span.close:hover,
    & span.close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
}

.wp-signals-screen {

    .alert {
        padding: 10px 15px;
        margin: 20px 0 35px 0;
        max-width: 1100px;

        &.alert-danger {
            color: white;
            background-color: #151515;
        }
    }


    .animation-rotate {
        animation: rotate 5s infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(360deg);
        }

        50.01%, 100% {
            transform: rotate(0deg);
        }
    }



    font-size: 14px;
    & p, & button, & h4 {
        font-size: 14px;
    }

    & .text-right {
        opacity: 0.6;
        text-align: right;
        margin-top: 15px;
    }

    & .btn {
        outline: none;
        padding: 15px 25px;
        box-shadow: none;
        border: 1px solid black;
        text-transform: uppercase;

        &.btn-success {
            color: white;
            background-color: #28a745;
            border-color: #28a745;
            border-radius: 3px;
        }

        &.btn-danger {
            padding: 10px 20px;
            color: white;
            background-color: #dc3545;
            border-color: #dc3545;
            border-radius: 3px;
        }

        &.btn-small {
            padding: 7px 19px;
        }
    }

    background-color: #f5f5f5;
    padding: 25px 20px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & h3 {
        margin: 20px 0 10px 0;
        padding: 0;
    }

    & h4 {
        margin: 30px 0 10px 0;
        padding: 0;
    }

    & p {
        margin: 3px 0 10px 0;
        padding: 0;
    }

    & .screen-body {
        width: calc(100% - 310px);

        & .section {
            background-color: white;
            box-shadow: 0 0 5px #e0e0e0;

            margin: 10px 0 30px 0;
            padding: 20px 20px;

            & .section-icon {
                float: right;
                clear: right;
                margin: 0px 20px 20px 20px;

                width: 60px;
                height: auto;
            }
        }
    }





    & .form-group {

        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        margin: 30px 0 50px 0;
        margin-left: auto;
        margin-right: auto;


        & label {
            margin: 0 0 15px 0;
        }

        & select, & input {
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
            height: auto;
            outline: none;
            line-height: 1.5;
            min-height: 50px;
        }
    }


    & .form-check {
        padding: 5px 0;
        padding-left: 40px;
        background-position: 10px center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        margin-bottom: 10px;

        user-select: none; /* standard syntax */
        -webkit-user-select: none; /* webkit (safari, chrome) browsers */
        -moz-user-select: none; /* mozilla browsers */
        -khtml-user-select: none; /* webkit (konqueror) browsers */
        -ms-user-select: none; /* IE10+ */

        &[data-value="true"] {
            background-image: url('../assets/icons/tick.png');
        }

        &[data-value="false"] {
            background-image: url('../assets/icons/checkbox.png');
            background-size: 17px 17px;
        }
    }










    & .screen-sidebar {
        width: 300px;
    }


    &.wp-signals-dashboard-screen {

        & .default-setup {

            & img {
                width: 40%;
                height: auto;
                max-width: 100px;

                margin: 40px 0 60px 0;
            }

            & p > img {
                margin: 0;
                height: 18px;
                width: auto;
                display: inline-block;

                margin-right: 3px;
            }

            & a.btn {
                display: inline-block;
                margin: 30px 0 30px 0;
                text-decoration: none;
            }
        }


        & .dashboard-status {
            display: flex;
            flex-direction: row;
            margin: 31px 0 55px 0;

            & div.image {
                padding: 20px;
                width: 30%;
                max-width: 160px;
                text-align: center;

                & img {
                    width: 80%;
                    max-width: 90px;
                }
            }

            & div.information {
                padding: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                & h3 {
                    margin-top: 0;
                }

                & p {
                    margin-bottom: 0;
                }

                & p:first-of-type {
                    margin-top: 12px;

                    & em {
                        font-style: normal;
                    }
                }
            }
        }
    }




    &.wp-signals-events-screen {
        & h4 {
            margin: 25px 0 5px 0;
        }

        & h4:first-of-type {
            margin-top: 50px;
        }

        & .current-event-triggers {
            margin: 5px 0 25px 0;

            & span {
                display: inline-block;
                border-radius: 5px;
                border: 1px solid black;
                background-color: #d2eacf;
                padding: 5px 15px;
                margin: 5px 20px 5px 10px;

                & strong {
                    //border-right: 1px dashed #367d3e;
                    padding: 0 10px 0 0;
                    margin-right: 10px;
                }

                &.edit {
                    cursor: pointer;
                }
            }
        }

        & div.events-container {
            width: 95%;
            max-width: 900px;

            & table.events {
                margin: 30px 0 35px;
                width: 100%;
                max-width: 760px;

                & tr {
                    & td {
                        padding: 10px 15px;
                    }

                    & td:first-child {
                        font-weight: bold;
                    }

                    &:nth-child(even) {
                        background-color: #f7f7f7;
                    }
                }

                & tr.no-events {
                    padding: 25px 0;
                    color: #1000af;
                    text-align: center;

                    & td {
                        & img {
                            display: inline-block;
                            max-width: 60px;
                            margin-right: 50px;
                        }

                        & p {
                            max-width: 400px;
                            padding-top: 1px;
                            display: inline-block;
                            vertical-align: top;
                            letter-spacing: 0.5px;
                            line-height: 2;
                        }
                    }

                    &.hidden {
                        display: none;
                    }
                }

                & tr td img.remove-event {
                    height: 15px;
                    width: auto;
                    margin: 0 10px;
                }
            }

            & .btn-add-event {
                margin: 10px 0 30px auto;
                text-align: right;
            }
        }

    }




    &.wp-signals-logs-screen {

        & table.logs-data {
            margin: 30px 0 25px;
            width: 90%;
            max-width: 900px;
            margin-left: 20px;

            & tr td, & tr th {
                padding: 10px 10px;
            }

            & tr th, & tr td {
                border-bottom: 1px solid #dfdfdf;
            }

            & tr th {
                text-align: left;
            }

            & tr:nth-child(odd) td {
                background-color: black;
                color: white;
            }

            & td.no-data {
                text-align: center;
                padding: 25px 0;
                font-weight: bold;
                color: red;
                letter-spacing: 0.5px;
            }
        }
    }


    &.wp-signals-help-screen {


        & .question-item {

            margin: 0 15px 0px 0;
            padding: 10px 0;
            padding-right: 100px;

            & .question {
                font-weight: bold;
            }

            & .answer {
                text-indent: 10px;
            }
        }

    }


    &.wp-signals-settings-screen, &.wp-signals-dashboard-screen {

        & .button-group {
            margin: 20px 0 50px 0;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            & .button-option {
                display: flex;
                flex-direction: column;
                width: 250px;
                padding: 20px 15px;
                text-align: center;
                background-color: #f3f3f3;
                box-shadow: 0 0 5px #e0e0e0;

                & img {
                    width: 120px;
                    height: auto;
                    margin: 25px auto 30px auto;
                }

                & h4, & p {
                    width: 100%;
                    white-space: pre-wrap;
                    white-space: normal;
                    word-wrap: break-word;
                    margin: 10px 0 5px 0;
                }
            }


            &.marked-options {
                & .button-option {
                    opacity: 0.6;

                    &.selected {
                        opacity: 1;
                    }
                }

            }
        }

    }


    &.wp-signals-analytics-screen, &.wp-signals-dashboard-screen, &.wp-signals-logs-screen {

        & .no-info-chart {
            color: red;
            margin: 50px 0 40px 0;
            text-align: center;
            max-width: 600px;
        }

        & .keyschart-detail {
            display: none;
        }

        & .analytics-group {
            width: 90%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            & .analytics-item {

                background-color: #fdfdfd;
                box-shadow: 0 0 5px #e0e0e0;

                margin: 10px 0 30px 0;
                padding: 20px 20px;


                & img {
                    float: left;
                    width: 50px;
                    height: auto;
                }

                & h3, & p {
                    margin: 0 0 10px 0;
                    margin-left: 70px;
                }

                & p {
                    margin-bottom: 0;
                    text-align: right;
                }

            }
        }

    }




    & .centered-contents {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }


    & .wp-signals-component {
        &.wp-signals-component-sidebar {

            h2 {
                opacity: 0.6;
                font-weight: bold;
                font-size: 20px;
                text-transform: uppercase;
            }

            & .news-item {
                background-color: white;
                box-shadow: 0 0 5px #e0e0e0;

                margin: 10px 0 30px 0;
                padding: 20px 20px;

                & h3 {
                    margin: 0;
                    padding: 5px 0 10px 0;
                }

                & p {
                    padding: 3px 0 10px 0;
                }

                & img {
                    width: 100%;
                    max-width: 300px;
                    height: auto;
                }

            }
        }
    }
}



@media screen and (max-width: 900px) {
    .wp-signals-screen {
        flex-direction: column;

        & .screen-body {
            width: 100%;
        }

        & .screen-sidebar {
            margin: 90px auto 30px auto;
        }


        &.wp-signals-settings-screen, &.wp-signals-dashboard-screen {
            & .button-group {
                width: 100%;
                align-items: center;
                flex-direction: column;

                & .button-option {
                    margin-bottom: 20px;
                }
            }
        }

        &.wp-signals-analytics-screen, &.wp-signals-dashboard-screen, &.wp-signals-logs-screen {
            & .analytics-group {
                flex-direction: column;
                align-items: center;
            }
        }
    }
}


@media screen and (max-width: 1400px) {


    .wp-signals-screen {
        &.wp-signals-analytics-screen, &.wp-signals-dashboard-screen, &.wp-signals-logs-screen {
            & .analytics-group {
                flex-direction: column;
                align-items: center;
            }
        }
    }

}