/*
 * Global CSS variables.
 */
:root {
    --banner-height: 20px;
}

@font-face {
    font-family: "GT Walsheim";
    font-style: normal;
    font-weight: normal;
    src: url("/static/fonts/GT-Walsheim-Regular.woff2") format("woff2"),
        url("/static/fonts/GT-Walsheim-Regular.woff") format("woff"),
        url("/static/fonts/GT-Walsheim-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "GT Walsheim";
    font-style: italic;
    font-weight: normal;
    src: url("/static/fonts/GT-Walsheim-Regular-Oblique.woff2") format("woff2"),
        url("/static/fonts/GT-Walsheim-Regular-Oblique.woff") format("woff"),
        url("/static/fonts/GT-Walsheim-Regular-Oblique.ttf") format("truetype");
}

@font-face {
    font-family: "GT Walsheim";
    font-style: normal;
    font-weight: 300;
    src: url("/static/fonts/GT-Walsheim-Light.woff2") format("woff2"),
        url("/static/fonts/GT-Walsheim-Light.woff") format("woff"),
        url("/static/fonts/GT-Walsheim-Light.ttf") format("truetype");
}

@font-face {
    font-family: "GT Walsheim";
    font-style: italic;
    font-weight: 300;
    src: url("/static/fonts/GT-Walsheim-Light-Oblique.woff2") format("woff2"),
        url("/static/fonts/GT-Walsheim-Light-Oblique.woff") format("woff"),
        url("/static/fonts/GT-Walsheim-Light-Oblique.ttf") format("truetype");
}

@font-face {
    font-family: "GT Walsheim";
    font-style: normal;
    font-weight: bold;
    src: url("/static/fonts/GT-Walsheim-Medium.woff2") format("woff2");
}

html {
    height: 100%;
}

/*
 * Configure font. By default, form elements do not inherit body's font
 * settings and have to be set manually.
 */
body,
input,
textarea,
button {
    font-family: "GT Walsheim", sans-serif;
    font-weight: 400;
}

/*
 * Sticks footer to the bottom (without hiding any content).
 * https://css-tricks.com/a-clever-sticky-footer-technique/
 */
body > footer {
    position: sticky;
    top: 100vh;
}

body {
    background-color: #f6f6f6 !important;
    min-height: 100vh;

    /* Prevent Safari from synthesizing bold fonts, see also:
     * https://bugs.webkit.org/show_bug.cgi?id=258050 */
    font-synthesis: none !important;
}

footer {
    background-color: #f2f2f2 !important;
}

/*
 * Fixes buttons' heights inside the <details> element.
 *
 * If not set, buttons are too big. Might be a bug in bulma, created issue:
 * https://github.com/jgthms/bulma/issues/3636
 */
details .button {
    box-sizing: border-box;
}

/*
 * Fixes <details> behaviour for block elements as <summary>.
 *
 * See also: https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
 */
details summary > * {
    display: inline;
}

.box {
    border-radius: 2px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px !important;
}

.is-fullheight {
    height: 100%;
}

.is-fullheight-with-nav {
    height: calc(100% - 56px);
}

div.columns.is-gapless:not(:last-child) {
    margin-bottom: 0em;
}

/*
 * Banner that indicates whether this is a staging system or not. Only shown
 * on non-production environments. Will be rendered as the top element on page.
 * If you plan to take up the whole screen (e.g., 100vh), you have to
 * eventually subtract that height.
 */
.banner {
    height: var(--banner-height);
}

.banner p {
    vertical-align: middle;
    display: inline;
}

#sidebar {
    width: 30%;
    flex: none;
    overflow-x: hidden;

    transition: 0.3s;
    box-shadow: 8px 0px 8px rgba(10, 10, 10, 0.1);
    /* Must be "above" the plan for its box-shadow to take affect, i.e., that
     * the sidebar looks elevated over the plan. */
    z-index: 10;

    /* Hide scrollbar (Firefox) */
    scrollbar-width: none;
    /* Hide scrollbar (Edge) */
    -ms-overflow-style: none;
}

/* Hide scrollbar (Chrome) */
#sidebar::-webkit-scrollbar {
    display: none;
}

#sidebar details summary {
    cursor: pointer;
}

/* Hide summary '>' marker */
#sidebar details > summary {
    list-style: none;
}
#sidebar details > summary::-webkit-details-marker {
    display: none;
}

#sidebar details > summary i {
    transition: 0.2s;
}

#sidebar details[open] > summary i {
    transform: rotate(180deg);
}

.sidebar-entry > header {
    padding-bottom: 1.5em;
    border-bottom: 2px solid white;
}

.sidebar-entry main {
    padding-top: 1.5em;
}

#sidebar .label {
    color: #fff;
}

#sidebar.closed {
    /* leave 24px for the toggle icon. */
    margin-left: calc(-30% + 24px);
    overflow-y: hidden;
}

.card-no-content > .card-header {
    cursor: default;
}

.sidebar-toggle {
    cursor: pointer;
}

.sidebar-toggle i {
    transform: rotate(0deg);
    transition: all 0.35s ease-in-out;
}

#sidebar.closed .sidebar-toggle i {
    transform: rotate(-180deg);
}

.sidebar-entry {
    margin-bottom: 1.5rem;
}

.sidebar-entry-toggle i {
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.sidebar-entry-toggle.expanded i {
    transform: rotate(180deg);
}

.card-header:hover {
    background-color: #f6f6f60a;
}

.card-header {
    box-shadow: none;
    background-color: #bdbdbd0a;
}

#sidebar input,
#sidebar select,
#sidebar textarea {
    outline: 0;
    border-width: 0 0 2px;
    border-color: white;

    color: #fff;
    background-color: #363636;
}

#sidebar ::placeholder {
    color: lightgray;
}

.building-thumbnail img {
    cursor: grab !important;
}

#infobar {
    /*
     * position is required when using z-index to render element above another
     * elements box-shadow. In this case, infobar should be rendered over
     * sidebars shadow.
     */
    position: relative;
    min-height: 56px;
    z-index: 20;
    margin-bottom: 0em;
    padding: 5px;
}

#infobar .level-right .level-item {
    margin-right: 0.3em;
}

.project-list-item {
    line-height: 2.5em;
}

.data-list {
    width: 100%;
    border-spacing: 0 15px;
    border-collapse: separate;
}

.data-list.catalogue-list thead tr th:nth-child(1) {
    min-width: 50%;
}

.data-list.project-list thead tr th:nth-child(1) {
    min-width: 65%;
}

.data-list thead tr th {
    font-size: 1em !important;
    opacity: 0.9;
}

.data-list tbody tr {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px !important;
}

.data-list th {
    padding: 0px 15px;
}

.data-list td {
    padding: 22px 15px;
}

.data-list td > a {
    display: block;
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-list.catalogue-list thead tr th:nth-child(1) {
    min-width: 50%;
}

.data-list.project-list thead tr th:nth-child(1) {
    min-width: 65%;
}

.project-list {
    table-layout: fixed;
}

.project-list-item:not(:first-child) {
    padding-top: 1em;
}

.project-list-item:not(:last-child) {
    padding-bottom: 1em;
    border-bottom: 2px solid #f5f5f5;
}

/*
TODO
.table thead,
.table tbody {
    text-align: right;
} */

.modal table thead,
.modal table tbody {
    text-align: left;
}

.toolbar-icon-fa {
    font-size: 1.5em;
    color: #484848;
}

.popup-form {
    min-width: 300px;
}

.leaflet-popup {
    min-width: 300px;
}

.leaflet-popup.bulk .leaflet-popup-content {
    min-width: 300px;
}

.notifications {
    position: fixed;
    padding-top: 15px;
    right: 0.5rem;
    z-index: 100;
    width: 500px;
}

.notification {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.notification.hidden {
    opacity: 0;
    transform: translateX(100%);
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
    transition-duration: 500ms;
}

.notification.leave {
    opacity: 0;
    transition: opacity 250ms;
}

/*
 * Dark-mode for navigation tabs,
 * style adopted from here:
 * https://github.com/jloh/bulma-prefers-dark/blob/master/css/bulma-prefers-dark.css#L5111-L5145
 */
.tabs.is-dark a {
    border-bottom-color: #363636;
    color: #b5b5b5;
}

.tabs.is-dark a:hover {
    border-bottom-color: #dbdbdb;
    color: #dbdbdb;
}

.tabs.is-dark li.is-active a {
    border-bottom-color: #5ea3e4;
    color: #5ea3e4;
}

.tabs.is-dark ul {
    border-bottom-color: #363636;
}

.tabs.is-dark.is-boxed a:hover {
    background-color: #242424;
    border-bottom-color: #363636;
}

.tabs.is-dark.is-boxed li.is-active a {
    background-color: #0a0a0a;
    border-color: #363636;
}

.tabs.is-dark.is-toggle a {
    border-color: #4a4a4a;
}

.tabs.is-dark.is-toggle a:hover {
    background-color: #242424;
    border-color: #4a4a4a;
}

.tabs.is-dark.is-toggle li.is-active a {
    background-color: #5ea3e4;
    border-color: #5ea3e4;
    color: #fff;
}

.highlighted {
    fill: lightblue;
    fill-opacity: 0.6;
}

[data-map-crs="local"].leaflet-container {
    background-color: white;
}

#save-layout {
    min-width: 140px;
}

/* put delete buttons on the same line as layout name: */
div.layout-navbar-wrapper {
    display: flex;
}

#delete-layout {
    font-size: 18px;
    color: black;
}

#delete-layout:hover {
    color: #dc143c;
}

#delete-layout-button {
    padding-top: 7px;
}

#strategy-modal-card {
    min-height: 410px;
    min-width: 700px;
}

.is-narrow .button {
    margin-right: 0.25rem !important;
}

.is-inactive.button {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-color: #4a4a4a;
}

.label-debug-marker {
    height: 50px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.bg-red {
    background-color: red;
}

.bg-blue {
    background-color: blue;
}

.figure-divide-ruler {
    height: 1px;
    background-color: #797979;
    /* If set to 100%, the ruler starts from the right side and ends near the
     * left end of the container. TODO: Find a proper solution. */
    width: 98%;
}

/*
 * Allows dropdowns within cards to render over the footer.
 * If left out, the dropdowns content is hidden behind other elements.
 * See also: https://github.com/jgthms/bulma/issues/936 (from 2017!)
 */
.modal .dropdown-content {
    position: fixed;

    max-height: 20em;

    overflow: auto;
}

/* https://github.com/jgthms/bulma/issues/1852 */
.has-expanded-form-labels .field-label {
    flex-grow: 2;
}

/* Wrap long names in sidebar cards. */
.card-header-title span {
    overflow-wrap: anywhere;
}

/* Push title a bit to the left of the icon */
.card-header-title .icon {
    margin-right: 0.25em;
}

/* Make content scrollable when overflowing. */
.is-scrollable {
    overflow: scroll;
}

.card-content.has-table {
    padding: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 1em;
}

.card-header.has-bottom-border {
    border-bottom: 1px solid lightgray;
}

details.has-large-marker > summary::marker {
    font-size: 30px;
}

.color-preview {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
}

.plan-draggable-feature {
    cursor: move !important;
}

.plan-resize-feature {
    cursor: move !important;
}

/*
 * Use crosshair cursor
 *
 * Overrule Leaflet's default cursor for layers, otherwise the cursor toggles
 * between crosshair and pointer when hovering a layer.
 */
.plan-drawing,
.plan-drawing .leaflet-interactive {
    cursor: crosshair !important;
}

/* https://github.com/geoman-io/leaflet-geoman/issues/1478 */
.geoman-draw-cursor .leaflet-interactive {
    cursor: unset;
}

/*
 * Disable hovering while drawing.
 *
 * NOTE: This also deactivates other pointer-events and could lead to problems.
 * We should find a better way to disable hovering.
 *
 */
.plan-drawing .leaflet-interactive {
    pointer-events: none !important;
}

#building-type-config .table {
    background-color: unset;
}

/* File drop zone */
.dropzone {
    border: 2px rgba(72, 72, 72, 0.25) dashed;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
}

.dropzone.active {
    background-color: rgba(72, 72, 72, 0.05);
    border: 2px rgba(72, 72, 72, 0.55) dashed;
    border-style: solid;
}

/* Show icon and text on the same row */
.dropzone p {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* A <a> with a thick underline */
a.is-strong-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}