/*
    NAVIGATING THIS PAGE QUICKLY

    Ctrl + F on "!!!!" for the main seperators
    Remove exclamation marks for more details

    "!!!!" = main seperators
    "!!!"  = main separators + sections
    "!!"   = main seperators + sections + subsections


    
    USING VISUAL STUDIO CODE

    Code regions (sections) and markers are defined
    such as below this comment block. These can be
    collapsed for better project navigatibility.

    In the VSCode Minimap (bar of mini-code to the right
    of the editor) the marker-texts are visible.

*/

/* ———————————————————————————————————— !! Time period picker ——————————————————————————————————— */

.time-period-container {
    position: relative;
    display: flex;
    gap: var(--4px);
}

.time-period-button {
    padding: var(--8px);
    font-size: var(--12px);
    line-height: var(--12px);
    color: light-dark(var(--grey-300), var(--grey-200));
    background-color: light-dark(var(--grey-100), var(--grey-450));
    border: 1px solid light-dark(var(--grey-200), var(--grey-350));
    border-radius: var(--4px);
    cursor: pointer;
    box-shadow: var(--small-shadow);
}

.time-period-button:hover {
    background-color: light-dark(
        color-mix(in srgb, var(--grey-100) 33%, var(--grey-150)),
        color-mix(in srgb, var(--grey-500) 33%, var(--grey-450))
    );
    border: 1px solid light-dark(var(--grey-250), var(--grey-350));
    color: light-dark(var(--grey-400), var(--grey-200));
}

.time-period-button:disabled {
    background-color: light-dark(var(--grey-050), var(--grey-500));
    border: 1px solid light-dark(var(--grey-150), var(--grey-350));
    color: light-dark(var(--grey-150), var(--grey-300));
    cursor: not-allowed;
    box-shadow: none;
}

#picker-from-date, 
#picker-to-date {
    font-weight: 600;
    padding: 0px var(--4px);
}

.time-period-popover {
    position: absolute;
    top: 100%;
    background: light-dark(var(--grey-100), var(--grey-450));
    border: 1px solid light-dark(var(--grey-200), var(--grey-350));
    border-radius: var(--4px);
    padding: var(--12px);
    margin-top: var(--6px);
    z-index: 999;
    box-shadow: var(--large-shadow);
}

.view-menu {
    flex-direction: column;
    gap: var(--4px);
    width: 10.875rem;
}
.view-menu .seperator {
    width: calc( 100% - 2*var(--24px) );
    height: 1px;
    background-color: light-dark(var(--grey-200), var(--grey-350));
    margin: var(--6px) var(--24px);
}

.quick-selects {
    display: flex;
    gap: var(--4px);
    margin-bottom: var(--12px);
}

.quick-button {
    background-color: light-dark(var(--grey-150), var(--grey-400));
    border: 1px solid light-dark(var(--grey-250), var(--grey-300));
    border-radius: var(--4px);
    padding: var(--8px) var(--16px);
    color: light-dark(var(--grey-450) ,var(--grey-150));
    cursor: pointer;
    font-size: var(--12px);
    line-height: var(--12px);
    font-weight: 600;
    box-shadow: var(--small-shadow);
}
.quick-button:hover {
    background-color: light-dark(var(--grey-200), var(--grey-450));
}

/* Datepicker adjustments */
.bootstrap-datetimepicker-widget table td.day, 
.bootstrap-datetimepicker-widget table td.hour, 
.bootstrap-datetimepicker-widget table td.minute, 
.bootstrap-datetimepicker-widget table td.second, 
.bootstrap-datetimepicker-widget table thead th,
.bootstrap-datetimepicker-widget table td span {
    font-weight: 600;
}

.bootstrap-datetimepicker-widget table td.disabled {
    color: light-dark(var(--grey-150), var(--grey-350));
}

.bootstrap-datetimepicker-widget table td.day.old:not(.disabled),
.bootstrap-datetimepicker-widget table td.day.new:not(.disabled) {
    color: light-dark(var(--grey-350), var(--grey-200));
}

.bootstrap-datetimepicker-widget table td.day:hover, 
.bootstrap-datetimepicker-widget table td.hour:hover, 
.bootstrap-datetimepicker-widget table td.minute:hover, 
.bootstrap-datetimepicker-widget table td.second:hover, 
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table td span:hover {
    background: light-dark(var(--grey-150), var(--grey-350));
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: light-dark(var(--primary-color-300), var(--primary-color-200));
}

.bootstrap-datetimepicker-widget table td.active, 
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: light-dark(var(--primary-color-300), var(--primary-color-200));
}

/* ————————————————————————————————————— !! Location Picker ————————————————————————————————————— */

.location-picker {
    padding: var(--4px) var(--12px);
    font-size: var(--12px);
    color: light-dark(var(--grey-050), var(--grey-550));
    background-color: light-dark(var(--grey-500), var(--grey-050));
    border: 1px solid light-dark(var(--grey-500), var(--grey-050));
    border-radius: 99px;
    height: var(--30px);
    box-shadow: var(--small-shadow);
    margin-left: auto;
}

.location-picker-container {
    display: flex;
    position: relative;
    flex-grow: 1;
    order: 2;
}

.location-picker:hover {
    background-color: light-dark(var(--grey-450), var(--grey-100));
}

#location-name {
    font-size: var(--12px);
    font-weight: 600;
    padding: 0 0 0 var(--4px);
}

#location-name::before {
    content: "Locatie: "
}

.location-popover {
    position: absolute;
    right: 0;
    top: 2.125rem;
    max-height: 55vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: light-dark(var(--grey-350), var(--grey-200)) transparent;
    background: light-dark(var(--grey-500), var(--grey-050));
    border: 1px solid light-dark(var(--grey-500), var(--grey-050));
    padding: var(--8px);
    z-index: 1000;
    width: fit-content;
    min-width: 12.5rem;
    max-width: 15rem;
    border-radius: var(--8px);
    box-shadow: var(--large-shadow);
}

.location-popover-item {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--4px);
    padding: var(--4px) var(--8px);
    color: light-dark(var(--grey-050), var(--grey-550));
    font-size: var(--12px);
    line-height: var(--12px);
    font-weight: 600;

}

.location-popover-item::before {
    content: "\f30b";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    -webkit-font-smoothing: antialiased;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    font-size: var(--12px);
    line-height: var(--14px);
    vertical-align: baseline;
    padding: 0px var(--8px) 0px 0px;
}

.location-popover-item:hover {
    background: light-dark(var(--grey-450), var(--grey-100));
}

.time-period-picker, .location-picker {
    line-height: var(--12px);
    box-sizing: border-box;
}