/* Header */
header {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.logout {
    margin-top: auto;
    margin-bottom: auto;
}

.lang-selector {
    margin-top: auto;
    margin-bottom: auto;
}

.volume-unit-selector{
    margin-top: auto;
    margin-bottom: auto;
}

.nav-right {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.logo {
    padding: 20px 20px 10px 10px;
}

/* Content */
body {
    display: flex;
    flex-direction: column;
}

main {
    display: flex;
    flex-grow: 1;
    background-color: var(--tertiary);
    height: 100%;
}

/* Headlines */
h1 {
    margin-block: 0.8rem;
    font-size: 2.8125rem;
    width: min-content;
    white-space: nowrap;
}

h2 {
    margin-block-end: 0.4rem;
    font-size: 2.2125rem;
}

/* Form */

label {
    margin-block-end: 0.6rem;
}

.invalid-form ul {
    list-style: none;
}

select option[disabled] {
    display: none;
}

.profile-dropdown-wrapper {
    text-align: left;
}

    .profile-dropdown-wrapper > button {
        margin: 0px;
        width: 200px;
    }

/* Additional style classes */
.h100 {
    height: 100%;
}

html,
body {
    height: 100dvh;
    overflow: hidden;
}

.grow {
    flex-grow: 1;
    overflow: hidden;
}

.hide {
    display: none !important;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.field > select > option {
    background-color: var(--surface-variant);
    color: var(--scrim)
}

.flex {
    display: flex;
    flex-direction: column;
}

.full {
    height: 100%;
}

.scroll-y {
    overflow-y: scroll;
}

.w-250 {
    width: 250px;
}

.gap-10 {
    gap: 10px;
}

/* Data Tables */
.dt-layout-table {
    border-radius: 6px;
    overflow: hidden;
}

    .dt-layout-table tr {
        background-color: var(--tertiary);
        color: var(--chart-white);
    }

        .dt-layout-table tr td {
            background-color: var(--tertiary);
            color: var(--chart-white);
        }

.dt-scroll > * {
    border-radius: 0px;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: none !important;
}

.dt-scroll-body {
    height: auto !important;
}

#main-content .dt-paging-button.current {
    border: 1px solid white;
    background: transparent;
    border-radius: 4px;
}

#main-content .dt-paging-button:not(.current) {
    border: none !important;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

#main-content .dt-paging-button.disabled.previous, #main-content .dt-paging-button.disabled.next {
    color: var(--dark-gray) !important;
}

/* Index */
#sidebar {
    background-color: hsl(from var(--medium-gray) h s calc(l - 0));
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.sidebar-search-container {
    padding: 20px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    color: #111;
}

    .sidebar-search-container .search {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 40px;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        padding: 3px 4px;
        background-color: var(--chart-white);
    }

        .sidebar-search-container .search input {
            flex-grow: 1;
            height: 40px;
            width: 100%;
            font-size: 1rem;
            border: none;
            outline: none;
            background: none;
        }

        .sidebar-search-container .search i {
            cursor: pointer;
            border-radius: 50%;
            padding: 6px;
            transition: all ease-in-out .15s;
        }

            .sidebar-search-container .search i:hover {
                background: #ccc;
            }

#expanded-search > div {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    margin-top: 15px;
}


    #expanded-search > div select {
        border: none;
        outline: none;
        background-color: var(--chart-white);
        font-size: 1rem;
        padding: 10px;
        border-radius: 8px;
        flex-grow: 1;
        min-width: 0;
    }

.data-table-wrapper {
    position: relative;
    flex-grow: 1;
    margin: 0 20px 20px 20px;
}

    .data-table-wrapper > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

#bj-grid_wrapper col:first-child {
    width: 35px !important;
}

#bj-single-grid colgroup col:last-of-type {
    width: 35% !important;
}

div.dt-layout-row:not(.dt-layout-table) {
    display: none !important;
}

div.show-pagination div.dt-layout-row:not(.dt-layout-table) {
    display: flex !important;
}

div.show-pagination div.dt-search {
    display: none !important;
}

div.show-pagination .dt-input option {
    color: black !important;
}

div.show-pagination td {
    word-break: break-word;
    white-space: normal !important;
    align-content: start;
}

@media screen and (max-width: 831px) {
    div.show-pagination .dt-info {
        display: none !important;
    }
}

div.show-pagination .dt-empty {
    display: none;
}


#side-nav {
    color: var(--steel-gray);
    background-color: hsl(from var(--medium-gray) h s calc(l - 5));
    display: flex;
    flex-direction: column;
    width: 64px;
    gap: 16px;
    padding: 8px 0;
    z-index: 2;
}

    #side-nav > div > i {
        font-size: 32px;
        width: 32px;
        height: 32px;
        padding: 10px;
        margin: 6px;
        border-radius: 25%;
        transition: all ease-in-out .2s;
    }

        #side-nav > div > i:hover {
            background-color: var(--chart-white);
            cursor: pointer;
        }

        #side-nav > div > i:active {
            background-color: #eee;
            cursor: pointer;
        }

#main-content {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 600px) {
    #main-content {
        flex-direction: column-reverse;
    }

    #side-nav {
        flex-direction: row;
        width: 100vw;
        padding: 0;
        align-items: center;
        justify-content: center;
        height: 64px;
    }

    div:has(> #bj-grid_wrapper) {
        margin-bottom: 150px;
    }
}

#page-view {
    flex-grow: 1;
    overflow: hidden;
    margin: 0;
}

#data-section {
    position: relative;
    margin-left: -1rem;
}

    #data-section > div {
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: scroll;
        height: 100%;
        width: 100%;
    }

section {
    color: #fff;
}

.selected-tab-indicator {
    background-color: #eee;
}

@media screen and (max-width: 600px) {
    .mobile-hide {
        display: none;
    }
}

menu a {
    color: #ccc;
}

dialog {
    color: var(--white);
    background-color: var(--dark-gray);
}

.dialog-body nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .dialog-body nav > button {
        width: 200px;
    }

    .dialog-body nav > form > button {
        width: 200px;
    }

.dialog-close-button {
    cursor: pointer;
    border-radius: 50%;
    transition: all ease-in-out .15s;
    padding: 4px;
}

    .dialog-close-button:hover {
        background: #ccc;
    }

.dialog-wrapper{
    margin-right: auto;
}

.wrapper {
    display: flex;
    flex-grow: 1;
}

.form-page {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

    .form-page .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 10px 10px 0;
    }

@media screen and (max-width: 600px) {
    .form-page {
        padding-right: 15px;
        padding-left: 30px;
    }

        .form-page .header {
            flex-direction: column;
            gap: 5px;
        }
}

.form-wrapper {
    display: flex;
    flex-grow: 1;
    color: #fff;
}

    .form-wrapper form {
        flex-grow: 1;
    }

    .form-wrapper .row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

        .form-wrapper .row * {
            flex-grow: 1;
        }

@media screen and (max-width: 600px) {
    .form-wrapper .row {
        flex-direction: column;
        align-items: stretch;
    }

    h2 {
        max-width: 80vw;
        text-overflow: ellipsis;
        text-align: center;
        word-wrap: anywhere;
    }
}

.form-page .header i {
    color: var(--white);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all ease-in-out .15s;
}

    .form-page .header i:hover {
        background-color: hsl(from var(--tertiary) h s calc(l + 10));
    }

.form-page select {
    padding: 0 15px;
}

#company-delete,
#user-delete {
    color: var(--error);
}

.field label {
    color: var(--light-gray);
}

tr.highlight td,
tr:has(td.highlight) td {
    background-color: var(--light-gray);
    color: #000;
    box-shadow: none;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.sidebar-button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.sidebar-button button {
    flex-grow: 1;
    margin: 0 20px;
}

.datepicker:focus {
    outline: none;
    caret-color: transparent;
}

.datepicker-container {
    width: 230px;
    border-radius: 0.5rem;
}

@media screen and (max-height: 400px) {
    .datepicker-container {
        position: fixed !important;
        top: calc(50% - 120px) !important;
        left: calc(50% - 140px) !important;
    }

    .datepicker-container:before, .datepicker-container::after {
        background: transparent !important;
        border: none !important;
        content: none !important;
    }
}

.datepicker-panel > ul > li {
    font-size: 14px;
    width: 32px;
    height: 32px;
}

.datepicker-panel > ul > li[data-view="years current"], .datepicker-panel > ul > li[data-view="year current"], .datepicker-panel > ul > li[data-view="month current"] {
    width: 165px;
}

.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover, .datepicker-panel > ul > li:hover {
    color: var(--white) !important;
    background: var(--primary);
    border-radius: 0.5rem;
}

/* Charts */
.chart-page {
    overflow-y: scroll;
    padding: 20px;
}

.chart-container {
    position: relative;
    height: 400px;
}

.chart-page-header {
    flex-wrap: wrap;
}

.date-input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
}

div:has(> .date-input) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--tertiary);
    background-color: var(--primary);
    border-radius: 10px;
    padding: 10px;
}

.date-input {
    display: block;
    opacity: 100 !important;
    position: relative !important;
    padding: 0.2rem;
    background-color: var(--primary);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.datetime-input .datepicker {
    width: 76px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-right: 0.07rem solid rgb(92, 95, 114);
    border-radius: 0px;
}

.data-output-wrapper {
    margin-left: auto
}

#export-button {
    height: 44px;
    margin-left: 0;
}

@media screen and (max-width: 1231px) {
    .data-output-wrapper {
        margin-left: 0px
    }
    .
}

@media screen and (max-width: 600px) {
    .chart-container {
        height: 400px;
    }

    .chart-page-header {
        margin-left: 20px
    }
}

/* Tabs */
.tabs a {
    font-size: 16px;
    color: var(--white);
}

/* Timespan filter buttons */
#dialog-time-filters-button {
    height: 44px;
    margin: 0;
    border-radius: 8px;
}

#filter-dialog nav {
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: center;
}

@media all and (max-width: 1295px) {
    #filter-dialog .datetime-input {
        justify-content: flex-end;
        width: 70%;
    }

    #filter-dialog #time-from-mobile, #time-to-mobile {
        inline-size: auto;
    }

    #filter-dialog .time-span-selector {
        width: 70%;
    }

    .buttons-desktop {
        display: none;
    }

    .date-input-wrapper {
        display: flex;
    }
}

@media all and (min-width: 1295px) {
    .buttons-desktop {
        display: contents;
    }

    .dialog-wrapper {
        display: none
    }
}

/* Operation Logs Type Selector */
#operation-log-type-selector {
    width: 150px;
    margin-left:0;
    border-radius: 10px;
}

#operation-log-type-selector-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}