@import 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';

#content {
    display        : flex;
    flex-direction : column;
    flex           : 1;
}

#main {
    display        : flex;
    flex-direction : row;
    flex           : 1 1 100%;

    .b-resource-header {
        height : 100%;
    }

    > .b-panel .b-toolbar {
        height                 : 5em;
        border-bottom          : 1px solid var(--b-grid-header-border-color);

        --b-toolbar-background : var(--b-grid-header-background);

        .widget-title {
            display     : flex;
            align-items : center;
            font-size   : 1.2em;
            font-weight : 500;
        }
    }
}

/* Tweak the bordered style to use darker shades */
.b-sch-event-wrap {
    --b-sch-event-box-shadow : var(--b-elevation-1);

    .b-sch-event-content {
        flex-direction  : column;
        justify-content : center;
        align-items     : flex-start;
    }
}

.b-sch-event-content {
    display         : flex;
    height          : 100%;
    flex-direction  : column;
    justify-content : space-evenly;
}

.event-name {
    font-size : 1.3em;
}

.location {
    display     : block;
    margin-top  : 0.3em;
    font-weight : normal;
}

.fa-map-marker-alt {
    margin-inline : 1px 0.4em; /* Clipped to the left without for some reason */
}

/* Mapbox CSS adaptions */

.mapboxgl-popup-anchor-top {
    .mapboxgl-popup-tip {
        border-bottom-color : var(--b-neutral-100);
    }
}

.mapboxgl-popup-anchor-right {
    .mapboxgl-popup-tip {
        border-inline-start-color : var(--b-neutral-100);
    }
}

.mapboxgl-popup-anchor-bottom {
    .mapboxgl-popup-tip {
        border-top-color : var(--b-neutral-100);
    }
}

.mapboxgl-popup-anchor-left {
    .mapboxgl-popup-tip {
        border-inline-end-color : var(--b-neutral-100);
    }
}

/* Tooltip is misaligned when anchored to bottom (which Mapbox calls 'top') */
.mapboxgl-popup {
    &.mapboxgl-popup-anchor-top {
        margin-top : -1.2em;
    }

    .event-name {
        display     : block;
        margin      : 0 0 1.5em 0;
        font-size   : 1.4em;
        font-weight : bold;
    }
}

.mapboxgl-popup-content {
    padding        : 1em;
    box-shadow     : 0 1px 3px rgba(0, 0, 0, .5);
    pointer-events : none;
    background     : var(--b-neutral-100);

    transition     : background .2s;
}

.mapboxgl-popup-close-button {
    display : none;
}

.mapboxgl-marker {
    cursor : pointer;
}

.mapboxgl-canvas:focus {
    outline : none !important;
}

/* EOF Mapbox CSS adaptions */

.address-results {
    .b-list-item i {
        font-size : 1.5em;
        margin    : 0 0.7em 0 0.2em;
    }
}

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

.address-name {
    flex          : 1;
    margin-bottom : 0.4em;
    font-size     : 1.1em;
}

.lat-long {
    flex      : 1;
    color     : var(--b-neutral-50);
    font-size : 0.9em;
}

.b-unplanned-grid {

    &:not(.b-collapsed) {
        border-top : 1px solid var(--b-splitter-color);
    }

    .unplannedReturnTrip {
        .fa-car-side:before {
            transform : rotateY(180deg);
        }
    }

    .unscheduledNameCell i {
        margin-inline-end : 0.5em;
    }
}

.b-drag-proxy .b-sch-event-wrap {
    position : static;
    opacity  : 0.6;
}


.b-unplanned-grid-wrapper {
    height              : 100%;
    overflow            : auto;
    -webkit-user-select : none;
    user-select         : none;
}

.b-unplanned-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : 14px;

    thead {
        background : var(--b-grid-header-background);
        position   : sticky;
        top        : 0;
        z-index    : 1;
    }

    th {
        padding       : 0.8em;
        text-align    : left;
        font-weight   : 600;
        border-bottom : 2px solid var(--b-grid-header-border-color);
        white-space   : nowrap;
        position      : relative;
        user-select   : none;
        cursor        : pointer;

        i {
            margin-right : 0.3em;
        }

        .sort-icon {
            margin-left : 0.5em;
            opacity     : 0;
            transition  : opacity 0.2s;
            color       : var(--b-neutral-60);

            &.fa-sort-up,
            &.fa-sort-down {
                opacity : 1;
                color   : var(--b-theme-color);
            }
        }

        &:hover .sort-icon {
            opacity : 1;
        }
    }

    tbody {
        tr {
            border-bottom : 1px solid var(--b-grid-row-border-color);
            transition    : background-color 0.15s;
            cursor        : pointer;

            &:nth-child(odd) {
                background-color : var(--b-neutral-98);
            }

            &:hover {
                background-color : var(--b-neutral-95);
            }
        }
    }

    td {
        padding        : 0.8em;
        vertical-align : middle;
    }
}

.task-name-cell {
    font-weight : 500;

    i.fa-grip {
        margin-right : 0.5em;
        color        : var(--b-neutral-60);
        cursor       : grab;
    }
}

.duration-header,
.start-trip-header,
.return-trip-header {
    text-align : center;
    width      : 120px;
}

.duration-cell,
.start-trip-cell,
.return-trip-cell {
    text-align           : center;
    font-variant-numeric : tabular-nums;
}

.location-cell {
    color : var(--b-neutral-40);
}

.b-unplanned-grid-body-wrap {
    .b-panel-content {
        padding : 0px
    }
}