@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* app.css */

:root {
    --lu-brand: oklch(0.7443 0.1655 65.89);
    --lu-prio-base: oklch(0.8 0.12 134.88);
    --lu-prio-info: oklch(from var(--lu-prio-base) l c 134.88);
    --lu-prio-normal: oklch(from var(--lu-prio-base) l calc(c - .015) 217.96);
    --lu-prio-warning: oklch(from var(--lu-prio-base) l c 76.43);
    --lu-prio-danger: oklch(from var(--lu-prio-base) l c 7.54);
    --lu-prio-default: oklch(from var(--lu-prio-base) l c 128.57);
    --lu-shared-base: var(--lu-brand);
    --lu-shared-lowest: oklch(from var(--lu-shared-base) l calc(c - .1) 160);
    --lu-shared-yellow: oklch(from var(--lu-shared-base) calc(l + .1) calc(c + .1) 105);
    --lu-shared-orange:  var(--lu-shared-base);
    --lu-shared-highest: oklch(from var(--lu-shared-base) l calc(c + .1) 24);
}
/* Prevent horizontal scroll bugs (e.g. due to wide grids or animations) */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ensure full-height layouts work */
body {
    min-height: 100vh;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: calc(100dvh - 86px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

/*
  IMPORTANT:
  Comes from FluentBodyContent.

  Fluent UI (FAST) components such as FluentSelect / FluentCombobox
  render their dropdown panels inside the DOM tree.
  If a parent container clips overflow, the dropdown gets cut off.
  Keep overflow visible here so popups can extend beyond the layout.
*/
.body-content {
    align-self: stretch;
    height: calc(100dvh - 86px) !important;
    display: flex;
}

.input-surface {
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-fill-input-rest);
}

.popup-surface {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-fill-input-rest);
    margin-top: 0px;
}


.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-link:hover .fluent-card-minimal-style {
    background: var(--neutral-layer-2);
}


/* Lets the metadata row wrap on narrow screens */
.wrap-row {
    display: flex;
    flex-wrap: wrap;
}

.wrap-row > * {
    flex: 1 1 320px;
}


.page-title {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    margin: 0 0 12px;
}

.section-title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin: 0px;
}

.surface-outline {
    width: 100%;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    background: var(--neutral-fill-layer-1);
    padding: 16px;
    box-shadow: none;
}

strong {
    font-weight: 500;
    margin-bottom: 4px;
}



.tabs {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 0 20px; /* top | left-right | bottom (more space below) */
    font: inherit;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    position: relative;
    text-align: center;
}

.tab:hover {
    background: var(--neutral-fill-hover);
}

.tab.is-active {
    color: var(--accent-foreground-rest);
}

    .tab.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 12px; /* moved UP */
        width: 22px;
        height: 3px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--accent-fill-rest);
    }

.tab:focus-visible {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: -2px;
}


/* OpenLayers Map Event Popup */
.ol-popup {
    position: absolute;
    background: var(--neutral-layer-floating);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 16px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: 1px solid var(--neutral-stroke-layer-rest);
    bottom: 12px;
    left: -50px;
    min-width: 280px;
    max-width: 400px;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    color: var(--neutral-foreground-rest);
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: var(--neutral-layer-floating);
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: var(--neutral-stroke-layer-rest);
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--neutral-foreground-hint);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.1s ease;
    padding: 4px;
}

.ol-popup-closer:hover {
    color: var(--neutral-foreground-rest);
}

.ol-popup-closer:after {
    content: "X";
}

.ol-popup-content {
    max-width: 100%;
}

.ol-popup-content h4 {
    margin: 0 0 8px 0;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 600;
    line-height: var(--type-ramp-plus-1-line-height);
    color: var(--neutral-foreground-rest);
}

.ol-popup-content p {
    margin: 0 0 12px 0;
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    color: var(--neutral-foreground-hint);
}

.ol-popup-content a {
    font-size: var(--type-ramp-base-font-size);
    color: var(--accent-foreground-rest);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.1s ease;
}

.ol-popup-content a:hover {
    color: var(--accent-foreground-hover);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}