// main: backend.scss
@import "colors";

.tl_dashboard {

    fieldset > div {

        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;

        padding: 15px;
        padding-top: 0;

        > .item {

            display: flex;
            flex-direction: column;
            flex-shrink: 0;

            width: calc(50% - 7.5px);
            background: lighten($col-gray,5%);
            margin-top: 15px;

            .name {
                padding: 10px;
                padding-bottom: 0;

                display: flex;
                justify-content: space-between;
                flex-wrap: nowrap;

                span { margin-right: auto; }
                a { padding: 0 4px; }
            }

            .inner {

                height: 100%;
                background: $col-white;
                padding: 10px;
                margin: 10px;
                overflow: hidden;

                display: flex;
                flex-direction: column;

                .chart {
                    margin-bottom: auto;
                    padding-bottom: 15px;
                }

                .reset {

                    font-size: 0.8572em;
                    text-align: right;
                    color: darken($col-gray-1,10%);

                    p {
                        margin-bottom: 0.5em;
                    }
                }

                table {

                    width: 100%;
                    table-layout: fixed;

                    th, td {
                        padding: 2px 4px;
                        border: 1px solid $col-gray;
                        text-align: center;
                    }

                    tr th {
                        background: $col-gray;
                        border-bottom: 1px solid $col-white;
                    }
                }
            }
        }

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

            > .item {
                width: 100%;
            }
        }
    }

    .no-data {

        margin: auto;

        p {
            display: block;
            text-align: center;
            margin: auto;
            padding: 15px;
            opacity: 0.3;
        }

        p:before {
            content: "\2639";
            display: block;
            margin: 15px auto;
            font-size: 3em;
        }
    }
}

html[data-color-scheme="dark"] {

    .tl_dashboard fieldset > div > .item {

        background: var(--content-border);

        .inner {

            background: var(--content-bg);

            table {

                th, td {
                    border-color: var(--content-border);
                }

                tr th {
                    background: var(--content-border);
                    border-bottom-color: var(--content-bg);
                }
            }
        }
    }
}