:root {

    --gradient-gold: #ffbf00;
    --gradient-green: green;
    --menu-behind: #6E7F80; /*#f4f7fa*/
    --menu-bg-color: #f4f7fa; /*#6E7F80;*/
    --menu-txt-color: #000;
    --domain-color: #77065d; /* Before it is overwritten */

    --color-action-button-bg: #77065d;
    --color-action-button-txt: #fff;
    --color-delete-button-bg: #f8fafd;
    --color-delete-button-txt: #77065d;

    --color-filter-menu: rgb(215 215 0 / 80%);

    --color-trip-label: #666;

    --color-background: #f8fafd; /*#f8fafd;*/
    --color-white: #000;
    --color-background-alpha: #f8fafdaa;
    --color-text: #000;
    --color-hover-background: #6E7F80;/*#6f757e;*/
    --color-hover-background-alpha: #6f757e22;
    --color-hover-text: #fff;

    --color-filter-old: #ffbf00;
    --color-filter: #D7D700;

    --color-chart-text: #000;
    --color-filter-alpha: #ffbf00bb;
    --color-filter-background: #fdf8ee;

    --color-submenu-background: #e2e3e5;

    --cv-bg: var(--color-hover-text);
    --cv-text: var(--color-hover-background);
    --map-filter: none;
    --map-old-filter: none;

    --radius: 10px;
    --radius-small: 5pt;
    --view-max-width: 600px;
    --color-sql-command: #1d655e;
    --color-dataset-background: #6E7F80;
    --color-background-search: #fff;

    --color-bg-menu-smallscreen: #f4f7fa;

    --color-dark-button-text: #fff;
    --color-light-button-text: #000;

    --color-scrollbar-accent: #D7D700;
    --color-scrollbar-bg: #6E7F80;

    --tabulator-text: #000;
    --tabulator-bg: #6E7F80;
    --tabulator-top: #f8fafd88;
    --tabulator-odd: #f8fafd;
    --tabulator-even: #FBFCFE;
    --tabulator-selection: #d7d700;
    --tabulator-selection-out: #77065d;
    --tabulator-selection-cell-out: #6E7F80;
}

html.dark {

    --gradient-gold: #4d4203;
    --gradient-green: #023602;
    --color-silver: #022626;
    --menu-behind: #022626;
    --menu-bg-color: #1d655e; /*#6E7F80;*/
    --menu-txt-color: #fff;
    --domain-color: #1d655e;
    --color-filter-menu: #ffbf00;

    --color-trip-label: #fff;

    --color-action-button-bg: #1d655e;
    --color-action-button-txt: #fff;
    --color-delete-button-bg: #ffbf00;
    --color-delete-button-txt: #000;

    --color-background: #022626;
    --color-white: #fff;
    --color-background-alpha: #022626aa;
    --color-text: #e0e0e0;
    --color-hover-background: #1d655e;
    --color-hover-background-alpha: #99999922;
    --color-hover-text: #fff;

    --color-chart-text: #ffbf00;
    --color-filter: #ffbf00;
    --color-filter-alpha: #ffbf00bb;
    --color-filter-background: #ffbf00;
    --color-filter-text: #000;

    --color-submenu-background: #1d655e;

    --cv-bg: var(--color-background);
    --cv-text: var(--color-text);
    --map-old-filter: brightness(0.7) contrast(3) sepia(0.6) saturate(1) hue-rotate(300deg) invert(1);
    --map-filter: brightness(0.7) contrast(3) sepia(0.6) saturate(1) hue-rotate(210deg) invert(1);
    --color-sql-command: #ffbf00;
    --color-dataset-background: #022626;
    --color-background-search: #022626;
    --color-bg-menu-smallscreen: #1d655e;

    --color-dark-button-text: #fff;
    --color-light-button-text: #fff;

    --color-scrollbar-accent: #1d655e;
    --color-scrollbar-bg: #6f757e22;

    --tabulator-text: #fff;
    --tabulator-bg: #022525;
    --tabulator-top: #1e655e;
    --tabulator-odd: #3a5e63;
    --tabulator-even: #1e655e;
    --tabulator-selection: #ffbf00;
    --tabulator-selection-out: orange;
    --tabulator-selection-cell-out: #022525; /* darkgreen */
}

[data-trip-domain] {
  --domain-alpha: color-mix(in srgb, var(--domain-color) 13%, transparent);
  --domain-strong: color-mix(in srgb, var(--domain-color) 80%, black);
}

[data-participant-group="participant-group"] {
    background-color: #000;
    padding: 3pt 5pt 3pt 5pt;
    color:#fff;
    text-align:center;
    border-radius:3px;
}

@font-face {
    font-family: 'Cairo';
    src: url('../bundle/fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Righteous';
    src: url('../bundle/fonts/Righteous-Regular.ttf') format('truetype');
}
html {min-height:100%;scrollbar-color: var(--color-scrollbar-accent) var(--color-scrollbar-bg);}
body {
    margin: 0;
    display: flex;
    flex-direction: column;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    color: var(--color-text);
    background-color: var(--color-background);
    transition: background-color 0.3s ease, color 0.3s ease;

    /*background-image: linear-gradient(to bottom, transparent, var(--color-background) 100pt, var(--color-background) 100%), repeating-linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25) 24px, transparent 2px, transparent 10px), radial-gradient(circle at top center, rgba(255, 255, 255, 0.15) 0%, transparent 60%), linear-gradient(to right, var(--gradient-gold), var(--gradient-green));
    background-blend-mode: overlay;*/

    /*background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0.25) 24px, transparent 2px, transparent 10px),
    radial-gradient(circle at top center, rgba(255,255,255,0.15) 0%, transparent 60%),
    linear-gradient(to right, var(--gradient-gold), var(--gradient-green)),
    linear-gradient(to bottom, transparent, var(--color-background) 130pt);

    background-size:
    100% 60pt,
    100% 60pt,
    100% 60pt,
    100% 60pt;

    background-repeat: no-repeat;*/


}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

/*    background-image:
    url("images/frog.svg"),
    url("images/frog.svg");

    background-size: 120px 120px, 120px 120px;
    background-position: 0 0, 180px 180px;

    background-repeat: repeat;
    opacity: 0.02;
    filter: grayscale(1) contrast(0.9) brightness(0.80);*/
}

main { display: flex;height: 100%; }

#trip-side-navigator {
    width: 300px;
    position: sticky;
    top: 10pt;
    height: calc(100vh - 80pt);
    flex-shrink: 0;
    flex-basis: auto;
    margin: 10pt;
    background-color:
    color-mix(in srgb, var(--color-background), transparent 20%);
    padding: 10pt;
    border-radius: var(--radius);
    border: 1pt solid var(--color-hover-background);
}

#trip-side-navigator-open {
    position: sticky;
    display: none;
    align-items: center;
    height: calc(100vh - 80pt);
    top: 10pt;
    flex-shrink: 0;
    flex-basis: auto;
    padding-top: 28px;
    color: var(--color-filter-menu);
}

#trip-side-navigator-resizer {
    position: absolute;
    right: -5px;
    top: 0;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center
}

#trip-side-navigator-content {

    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

section#app {max-width:800pt;margin:10pt auto auto;width:100%;padding:3pt;box-sizing: border-box; }

#app {}

.immer-in-font-uc {font-family: 'Cairo', sans-serif;text-transform: uppercase;}
.bewegung-font-uc {font-family: 'Righteous', sans-serif;text-transform: uppercase;}

.trip-button {
    background-color: var(--domain-color);
    text-decoration:none;
    color:#fff;
    padding:2pt 5pt 2pt 5pt;
    display:inline-block;
    border-radius:3px;
    &:hover { background-color: var(--domain-strong); }
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-background-search);
    background-clip: padding-box;
    border: 1pt solid var(--color-hover-background);
    border-radius: 5pt;
    transition: border-color .15s
    ease-in-out, box-shadow .15s
    ease-in-out;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    &:focus {background-color:var(--color-white);}
}


.action-button {font-family:arial;font-size:12pt;background-color:var(--color-action-button-bg);color:var(--color-action-button-txt);border:1px solid #fff;border-radius:5pt;padding:8pt;cursor:pointer;}
.action-button:hover {background-color:color-mix(in srgb, var(--domain-color) 80%, white 20%);}
.source-button {width:200pt;margin:auto;font-family:arial;font-size:12pt;background-color:var(--color-delete-button-bg);color:var(--color-delete-button-txt);border:2px solid var(--color-delete-button-txt);border-radius:5pt;padding:8pt;cursor:pointer;}
.source-button:hover {background-color:color-mix(in srgb, var(--color-delete-button-bg) 80%, #666);}


.dark-button {font-family:arial;font-size:12pt;background-color:var(--domain-color);color:var(--color-dark-button-text);border:0;border-radius:5pt;padding:8pt;cursor:pointer;}
.dark-button:hover {background-color:color-mix(in srgb, var(--domain-color) 80%, white 20%);}
.filter-button {font-family:arial;font-size:12pt;background-color:var(--domain-color);color:var(--color-light-button-text);border:0;border-radius:5pt;padding:8pt;cursor:pointer;}
.filter-button:hover {background-color:color-mix(in srgb, var(--domain-color) 80%, white 20%);}
.black-button {font-family:arial;font-size:12pt;background-color:#000000;color:var(--color-white);border:0;border-radius:5pt;padding:8pt;cursor:pointer;color:#fff;}
.black-button:hover {background-color:color-mix(in srgb, var(--domain-color) 80%, white 20%);}


.item-viewer-filename{color: #000000;background-color: #ffffffaa;}
.item-viewer-button{width:30pt;height:30pt;border-radius:5pt;cursor:pointer;}

.overflow-scroll { max-width:100%;overflow-x:auto; }

#filter {
    display: flex;
    align-items: center;
}

#map { filter: var(--map-filter); height: 100%; }
#map_old { filter: var(--map-old-filter); }



#error_msg {
    margin: 20pt;
    background-color: var(--color-hover-background-alpha);
    border-radius: 5pt;
    color: var(--color-hover-background);
}

.gradient-bar-inactive {
    height: 5pt;
    width: 100%;
    background: linear-gradient(90deg, #1d655e, #1d655ecc, #82ec3e, #1d655e);
}

.gradient-bar {
    height: 5pt;
    width: 100%;
    background: linear-gradient(90deg, #1d655e, #1d655ecc, #82ec3e, #1d655e);
    background-size: 500%;
    animation: moveGradient 7s linear infinite;
}

@keyframes moveGradient {
    0% { background-position: 0 0; }
    0% { background-position: 500% 0; }
}

.delayed-pulse {
    display: none; /* inactivated */
    opacity: 0;
    animation: showImage 2s 3s forwards, pulse 1s 2s infinite;
}

@keyframes showImage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}


.day-section, .day-accommodation { margin-top:10pt; }
.day-header { margin-bottom:10pt; font-weight:bold; }

.warning {
  background: linear-gradient(90deg, #1d655e, #1d655ecc, #82ec3e, #1d655e);
}

input[type='file']{cursor:pointer;font-size:14pt;font-family:arial;border-radius:5pt;background-color: var(--color-hover-background-alpha);padding:10pt;border:2pt dashed var(--color-hover-background);}
input[type='file']::file-selector-button {padding:5pt;border-radius:5pt;border:0; color:var(--color-hover-text);background-color:var(--color-hover-background);}

dialog{width:100vw;height:100vh;}

#image-viewer-dialog, .item-viewer {background-color:#000;margin:0;}
.item-viewer img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin:auto;
}

.themePinColor {fill:var(--color-filter);}

#close-dialog {cursor:pointer;background-color:#dc3545;border:0;border-radius:40pt;color:#fff;height:40pt;width:40pt;}

@media (min-width: 601px) {
    #overview svg, #map_menu svg, #statistics svg {display:none;}
    #filter-button-undermenu{display:none;}
    #non_widescreen {display:block;}
}

@media (max-width: 600px) {
    .iib-menu-over span {display:none;}
    .widescreen {display:none;}
    #iib-foot {display:none;}
    .card-container, #statistics-summary-flex, #statistics-summary-flex-widget { flex-direction: column!important; }
    #filter-button-overmenu{display:none;}
    #non_widescreen {display:none;}
}

.stripes {
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25) 24px, transparent 2px, transparent 10px), radial-gradient(circle at top center, rgba(255, 255, 255, 0.15) 0%, transparent 60%), linear-gradient(to right, #ffbf00, green);
    background-blend-mode: overlay;
    border-radius: 20pt;
    padding: 10pt;
}

.blur {
    backdrop-filter: blur(8px);
    border: 1pt solid rgba(255, 255, 255, .5);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    border-radius:20px;

}

/* ------------------------ */
/* - PER COMPONENT LOGIC  - */
/* ------------------------ */

#component-loader {}

#component-menu {
    --transition-speed: 0.2s;
    background-color: var(--menu-behind);
    .frog {display:flex;align-items: center;}
    .shortcut {color:var(--menu-txt-color);cursor: pointer;}

    .iib-menu {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1000;

        a {
            text-decoration: none;
            color: var(--menu-txt-color);
            transition: background-color var(--transition-speed);

            &:hover {
                color: var(--color-text);
                background-color: var(--color-hover-background-alpha);
            }
        }
    }

    .iib-menu {
        &:has(#overview:hover, #submenu-overview:hover) #submenu-overview,
        &:has(#statistics:hover, #submenu-statistics:hover) #submenu-statistics,
        &:has(#more:hover, #submenu-more:hover) #submenu-more,
        &:has(#search:hover, #submenu-search:hover, #submenu-search:focus) #submenu-search,
        &:has(#filter:hover, #submenu-filter:hover, select:focus, select:focus-within) #submenu-filter {
            display: flex;
        }

        &:has(#overview:hover, #submenu-overview:hover) #overview,
        &:has(#statistics:hover, #submenu-statistics:hover) #statistics,
        &:has(#submenu-more:hover) #more, #more:hover,
        &:has(#submenu-search:hover) #search, #search:hover,
        #themeToggle:hover {
            background-color: var(--color-hover-background-alpha);
            color: var(--color-text);
        }
    }

    .iib-menu-over {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid var(--color-hover-background);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
        /*background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25) 24px, transparent 2px, transparent 10px), radial-gradient(circle at top center, rgba(255, 255, 255, 0.15) 0%, transparent 60%), linear-gradient(to right, var(--gradient-gold), var(--gradient-green));
        background-blend-mode: overlay;*/
        /*background-image: linear-gradient(to right, var(--gradient-gold), var(--gradient-green));*/
        background-color: var(--menu-bg-color);
        margin: 5pt 5pt 0 5pt;
        font-size:1.2rem;

        & img, & svg, #more {
            vertical-align: middle;
        }

        & img { height: 1.25rem; }

        & > div, & > a { padding: 0.75rem; }

	@media (max-width:  600px) {
        background-image:none;background-color:var(--color-bg-menu-smallscreen);margin:0;border-radius:0;
    }

    }

    .iib-menu-under {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        gap: 8px;
        z-index: 10;
        max-width: 100%;
        overflow-x: auto;
        margin: 0 5pt 0 5pt;
        border-bottom-left-radius:var(--radius-small);
        border-bottom-right-radius:var(--radius-small);

        /*background-color: var(--color-submenu-background);*/

	background-color: color-mix(in srgb, var(--color-submenu-background) 80%, #fff);


        border-bottom: 1px solid var(--color-hover-background);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);

        & > div, & > a { padding: 0.75rem; }

	@media (max-width:  600px) {
		margin:0;border-radius:0;
		border-radius: 0;
	}

    }

    #filter {
        background-color: var(--color-filter-menu);
        cursor: pointer;
        color: #000;

        .iib-menu:hover & { border-radius: 0; }

        &:hover,
        .iib-menu:has(#submenu-filter:hover, select:focus, select:focus-within) & {
            background: var(--color-filter-menu);
        }
    }

    #submenu-filter {
        background-color: var(--color-filter-menu);
        select { font-size: 1rem; padding: 0.5rem; }
        padding: 5px;
    }

    #submenu-search {
        background-color: var(--color-hover-background);
        input { font-size: 1rem; padding: 0.5rem; background-color: var(--color-background-search); }
    }

    .remove-filter {
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    #themeToggle {
    /*color:var(--color-text);*/
    cursor:pointer;

    }

    .submenu{display:flex;}
    .submenu div {font-family: 'Cairo', sans-serif;font-size:32pt;font-weight:bold;color:var(--color-hover-background); }

}

.component-breadcrumb {
    .breadcrumb { 
        color: var(--color-text);
        display: flex;
        align-items: center;
        font-family: 'Cairo', sans-serif;
        font-weight: bold;
        font-size: 16pt;
        margin: 10pt 0;
        gap: 5pt;
        overflow-x: auto;
    }

    .breadcrumb img:first-child { height: 18pt; }
    .breadcrumb img:nth-of-type(2) { height: 10pt; }

    .breadcrumb-link {
        text-decoration: none;
        font-weight: bold;
        color: var(--color-hover-background);
        padding: 0 5pt;
        border-radius: 5pt;
        border: 1pt solid var(--color-hover-background);
    }

    .breadcrumb-link.active {
        background-color: var(--color-hover-background);
        color: var(--color-hover-text);
    }

    .breadcrumb-link:not(.active):hover {
        background-color: var(--color-hover-background-alpha);
    }

    .breadcrumb-link svg {
        color: var(--color-hover-text);
    }
}

#component-map {}

/* ------------------- */
/* - PER PAGE LOGIC  - */
/* ------------------- */

#path-explore {

    input { background-color: var(--color-background-search);}
    .genre-icon-overlay {
        position: absolute;
        margin: 5px 0 0 5px;
        color: #82ec3e;
        z-index: 1000;
    }

    .card-spacer {
        flex: 1;
    }

    .cover {
        height: 160px;
        overflow: hidden;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('images/travel.svg');
        background-color: color-mix(in srgb, var(--domain-color), transparent 80%);
        transition: background-size 0.5s ease;
    }

    .has-cover {
        background-size: 110%, contain; /* cover changed to 110% to avoid img edges */
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
    }

    .explore-cover {
        border-radius: 2px;
        will-change: transform;
    }

    .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;

        & > * {
            flex: 1;
        }
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden;
        border-radius: 5px;
        border: 1px solid var(--color-hover-background-alpha);
        border-left: 5pt solid var(--domain-color);
        border-bottom: 1px solid var(--domain-color);
        padding: ;
        color: var(--color-text);
        text-decoration: none;

        &:hover {
            color: var(--color-text);
            background: var(--domain-alpha);
            border-color: var(--domain-color);

            .cover {transform: scale(1.1);}

            .explore-cover {
                transform: scale(1.08);
                filter: brightness(1.05);
            }
        }
    }

    .card-title {
        font-family: 'Cairo', sans-serif;
        font-weight: bold;
        padding: 5pt 10pt 5pt 10pt;
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .card-text {
        padding: 5pt 10pt 5pt 10pt;
    }
    .card-footer {
        background-image: repeating-linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 100%), linear-gradient(to bottom, var(--domain-color), var(--domain-color));
        color:#fff;
        padding:4pt 6pt 4pt 6pt;
        border-right-bottom-radius: var(--radius-small);
    }
    h2 {text-align:center;}
    .component-breadcrumb { justify-items:center; }
}

#path-overview-year, #path-overview-country {
    padding-bottom:3pt;
    details {
        margin-top:2px;
        summary {
            background-color: var(--color-hover-background);
            padding:5pt;
            color:#fff;
            border-radius: 3pt;
            user-select: none;
            cursor:pointer;
        }
        summary open {margin: 1px 0;}
        .details-content {
            .row { display: grid;grid-template-columns: 150px 1fr;color:var(--color-text); }
            .row-left {
                display:grid;
                place-items: center;
                align-items: center;
                background-color: var(--color-hover-background-alpha);
                padding:5pt;
            }
            .row-right {padding:5pt;display:flex;gap:3pt;flex-direction:row;flex-wrap:wrap;}
            .text-left { place-items: start; align-items: center; }
        }
    }
}
#trip-side-navigator {
    details[open] summary {
        margin-bottom: 5pt;
    }
    .row {
        grid-template-columns: 1fr !important;
    }
    .row-left {
        border-radius: var(--radius-small);
        justify-content: left;
        background-color: transparent !important;
        font-weight: bold;
        padding: 0 5pt 0 5pt !important;
    }
    .row-right { flex-direction: column-reverse !important; }
    .widescreen, .plain {display:none;}
    .breadcrumb-link  { cursor: pointer; }
}

#path-overview-plain {
    padding-bottom:3pt;
    max-width:100%;overflow-x:auto;
    a { text-decoration:none; }
    table {width:100%;border-spacing: 0 8px;}
    thead {margin:2pt 0;color:#fff;}
    tr:has(th) {background-color: var(--color-hover-background);border-radius: 3pt;}
    th {font-weight:normal;padding:5pt;}
    tr td:nth-child(1), tr td:nth-child(3), tr td:nth-child(4), tr td:nth-child(5) {text-align:center;}
    .trip-button {}
    tr:not(:has(th)):hover {background-color:var(--color-hover-background-alpha);}
}

#path-statistics-summary {
   #statistics-summary-flex { display:flex;flex-direction:row;gap:5pt;flex-wrap:wrap; }
   h2, p { text-align:center; }
    #stat-trip-overview { max-width:100%;width:100%; }
    #statistics-summary-flex-widget { display:flex;flex-direction:column;justify-content:top;gap:3pt;align-items:stretch; }
    .widget-class { background-color:var(--color-hover-background-alpha);border-radius:10pt;padding:10pt; }
    .stat-overv { flex:1;text-align:center; }
}

#path-statistics-visits {
    #statComment { padding:10pt;font-family:'Francois+One',sans-serif;margin-top:10pt; }
   .table-statistics-visits { color:#fff;border-radius: var(--radius-small); }
    thead { position:sticky;top:0; }
	tbody tr:hover {background-color:var(--color-hover-background-alpha);}

    .table-statistics-visits { padding:5pt;background-color:var(--color-hover-background); }
}

#path-statistics-overnights {
    text-align:center;
    .table-statistics-visits { color:#fff;border-radius:var(--radius-small);padding:5pt;background-color:var(--color-hover-background); }
    table { margin:auto; }
    thead { position:sticky;top:0; }
	tbody tr:hover {background-color:var(--color-hover-background-alpha);}

    .overnights { text-align:center; }
}

#path-statistics-themes {
	table { width:100%;border:0;border-collapse:collapse; }    
	thead td:first-child {color:#fff;border-top-left-radius:var(--radius-small);border-bottom-left-radius:var(--radius-small);background-color:var(--color-hover-background); }
	thead td:last-child {color:#fff;border-top-right-radius:var(--radius-small);border-bottom-right-radius:var(--radius-small);background-color:var(--color-hover-background); }
	tbody tr:hover {background-color:var(--color-hover-background-alpha);}
	td {padding:5pt;}
	tr td:nth-child(2) { text-align:center; }
}

#path-source {

      --bg: transparent;
      --border: #2a2d3a;
      --accent: #1d655e;
      --accent-hover: #1d655e22;
      --text: #000;
      --success: #34d399;
      --warn: #fbbf24;
      --error: #f87171;

      .immich-icon { height:20px;background-color: #fff;border-radius: 50%;padding:2px; }

	.item-viewer-button {width:auto;}

   * { margin: 0; padding: 0; box-sizing: border-box; }

    .container {
      width: 100%;
      max-width: 680px;
    }

	#bind-container {background-color:var(--color-hover-background-alpha);padding:10pt;border-radius:var(--radius);margin-bottom:10pt;}

    #source_settings_buttons > * {
	flex:1;
    }
    #source_settings_buttons {
        margin:10pt 0;
    }

    /* ── Radio Cards ── */
    .options {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 28px;
    }

    .option-card {
      position: relative;
      border: 1px solid var(--color-hover-background);
      border-radius: var(--radius);
      padding: 18px 20px 18px 52px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .option-card:hover {
      border-color: #3d4055;
    }

    .option-card.selected {
      border-color: var(--accent);
	background-color: var(--color-background);
    }

    .option-card input[type="radio"] {
        accent-color: var(--domain-color);
      position: absolute;
      left: 20px;
      top: 26px;
      width: 18px;
      height: 18px;
      border: 2px solid var(--color-hover-background);
      border-radius: 50%;
      background: var(--color-background);
      transition: border-color 0.15s;
    }

    .option-card.selected input[type="radio"] {
      border-color: var(--accent);
      background: var(--color-background);
    }

    .option-card h3 {
      margin-bottom: 4px;
      font-family: Cairo, sans-serif;
    }

    .option-card p {
    }

    .badge {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 7px;
      border-radius: 4px;
      margin-left: 8px;
      vertical-align: middle;
    }

    .badge.readonly { background: #fbbf2422; color: var(--warn); }
    .badge.sync    { background: #6c63ff22; color: var(--accent); }

    /* ── Action Area ── */
    .action-area {
      backdrop-filter: blur(8px);
      background-color: var(--color-background);
      border: 1px solid var(--color-hover-background);
      border-radius: var(--radius);
      padding: 24px;
      min-height: 120px;
      margin-bottom: 20px;
    }

    .action-area h4 {
      font-size: 0.88rem;
      color: var(--color-text);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 16px;
    }

    .hidden { display: none !important; }

    /* ── Inputs & Buttons ── */
    .file-drop {
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      padding: 32px 20px;
      text-align: center;
      color: var(--color-text);
      font-size: 0.88rem;
      transition: border-color 0.2s, background 0.2s;
      cursor: pointer;
      position: relative;
    }

    .file-drop.dragover {
      border-color: var(--accent);
      background: #6c63ff08;
    }

    .file-drop input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .file-drop .icon {
      font-size: 1.8rem;
      margin-bottom: 8px;
      display: block;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      border: none;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
    }

    .btn:disabled { opacity: 0.45; cursor: not-allowed; }

    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--text);
    }

    .btn-outline:hover { border-color: #3d4055; background: #ffffff06; }

    .btn-danger {
      background: #dc2626;
    }
    .btn-danger:hover { background: #ef4444; }

    .input-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .input-row input[type="text"] {
      flex: 1;
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--color-text);
      font-size: 0.88rem;
      outline: none;
      transition: border-color 0.15s;
    }

    .input-row input[type="text"]:focus {
      border-color: var(--accent);
    }

    /* ── Log ── */
    .log-panel {
      background: var(--surface);
      border: 1px solid var(--color-hover-background);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid var(--color-hover-background);
    }

    .log-header h4 {
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text);
    }

    .log-header button {
      background: none;
      border: none;
      color: var(--color-text);
      font-size: 0.78rem;
      cursor: pointer;
    }

    .log-header button:hover { color: var(--text); }

    #log {
      padding: 14px 18px;
      max-height: 260px;
      overflow-y: auto;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 0.78rem;
      line-height: 1.7;
      scrollbar-width: thin;
      scrollbar-color: var(--color-hover-background) transparent;
    background-color:var(--color-background);
	}

    .log-line { padding: 1px 0; }
    .log-line .ts { color: #555a70; margin-right: 8px; }
    .log-line.info  .msg { color: var(--text); }
    .log-line.ok    .msg { color: var(--success); }
    .log-line.warn  .msg { color: var(--warn); }
    .log-line.error .msg { color: var(--error); }

    /* ── OPFS Status Bar ── */
    .status-bar {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      padding: 14px 18px;
      background: var(--color-hover-background-alpha);
      border: 1.5px solid var(--color-background-color);
      border-radius: var(--radius);
      font-size: 0.82rem;
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
    }

    .status-dot.green { background: var(--success); }
    .status-dot.yellow { background: var(--warn); }
    .status-dot.red { background: var(--error); }

    .status-label { color: var(--color-text); }
    .status-value { color: var(--color-text); font-weight: 600; }

    /* ── Folder Info ── */
    .folder-info {
      margin-top: 14px;
      padding: 12px 14px;
      background: var(--bg);
      border-radius: 8px;
      font-size: 0.82rem;
    }

    .folder-info .filename {
      color: var(--accent);
      font-weight: 600;
    }

    .folder-info .meta {
      color: var(--text-dim);
      margin-top: 4px;
    }

    /* ── Progress ── */
    .progress-wrap {
      margin-top: 14px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: var(--accent);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ── Button row ── */
    .btn-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    /* ── Responsive ── */
    @media (max-width: 500px) {
      .input-row { flex-direction: column; }
      .input-row .btn { width: 100%; justify-content: center; }
    }
}
#path-about {
    .single-link {text-decoration:none;color:#1d655e;}
    .element {
        margin:30pt;
        padding:20pt;
        border-radius: var(--radius);
        background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25) 24px, transparent 2px, transparent 10px), radial-gradient(circle at top center, rgba(255, 255, 255, 0.15) 0%, transparent 60%), linear-gradient(to right, #1d655e, var(--gradient-green));

    }
    .lead {
        padding:15pt;
        margin:auto;
        display:inline-element;
        background-color: rgb(from var(--color-background) r g b / 0.8);
        backdrop-filter:blur(8px);
        border: 1pt solid rgba(255, 255, 255, .5);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
        border-radius:var(--radius);
	}

}
#path-report {}

#path-trip {

    padding-bottom:3pt;

    #trip_navigation {

        position:relative;display:flex;width:100%;max-width:800pt;justify-content: space-between;align-items: center;

        a {
            position:absolute;
            padding:11pt;
            background-color:var(--domain-color);
            margin:12pt;
            border-radius:5px;
            color:#fff;
            height: 18pt;
            width: 14pt;
            display: flex;
            align-items: center;
            top:0;
        }

            a:first-child{
            left:0;
            }

            a:last-child{
            right:0;
		background: linear-gradient(to right, rgb(from var(--domain-color) r g b / 0.9), rgb(from var(--domain-color) r g b / 0.8));
            }
    }

    .breadcrumb-trip {
        color: var(--color-text);
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        justify-items: end;
        align-items: center;
        font-family: 'Cairo', sans-serif;
        font-weight: bold;
        font-size: 1.25rem;
        margin: 0.5rem 0 1rem 0;
        gap: 0.5rem;
    }
    .breadcrumb-trip-link {
        text-decoration: none;
        font-weight: bold;
        background-color: var(--color-hover-background-alpha);
        color: var(--color-text);
        
        border-radius: 5px;
        transition: all 0.2s ease;
        padding:5pt;
        width:20pt;
        text-align:center;
        margin:0 5pt 0 5pt;

        &:hover {
            background-color: var(--color-hover-background);
            color: var(--color-hover-text);
        }
    }

    .breadcrumb-trip-info {
        color: #fff;
        background-color: var(--domain-color);
        border: 1pt solid var(--color-hover-background);
        padding: 5px 10px 5px 10px;
        line-height:1.2;
    }
    .trip-grid-row {
        display: grid;
        grid-template-columns: auto auto auto auto;
        align-items: center;
    }
    .utility-controls {
        display: flex;
        gap: 10pt;
        justify-content: flex-end;
    }

    /*Details*/
    details.trip {
        border-radius: 12px;
        padding: 1rem;
        background: var(--domain-alpha);

        summary {
            color: #fff;
            padding: 1rem;
            /*background: var(--domain-color);*/
            cursor: pointer;
            width: calc(100% - 100pt);
            margin: auto;
            background-image: repeating-linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 100%), linear-gradient(to bottom, var(--domain-color), var(--domain-color));
        }

        &[open] summary {
            margin-bottom: 0.5em;
        }
    }
    .column-stack {
        display: flex;
        flex-direction: column;
        gap: 2pt;
    }
    .trip-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    @media (max-width: 800px) {
        .trip-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
        }
        
        #map {
            aspect-ratio: 4 / 3;
            width: 100%;
            height: auto;
        }
	#trip-utilities {display:none;}
    }
    #trip-utilities {
    background-color: var(--color-hover-background); color: #d7d700; padding: 4pt;
    border-radius: var(--radius-small);
	z-index: 1000;
	}
    .row-flex {
        display: flex;
        gap: 2pt;
        flex-direction: row;
    }    
    .trip-details-field {
        width: 100%;
        padding: 1.5rem 0.5rem 0.5rem 0.8rem;
        font-size: 1rem;
        border: 0;
        border-radius: 4px;
        box-sizing: border-box;
        background: var(--domain-alpha);
    }

    .trip-details-label {
        position: absolute;
        top: 0.3rem;
        left: 0.5rem;
        font-size: 0.8rem;
        color: var(--color-trip-label);
        padding: 0 4px;
        pointer-events: none;
    }

    .clickable-icon {
        cursor: pointer;
    }
    .trip-summary-header {
        border-radius: 3pt;
        user-select: none;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	gap: 10pt;
    }



    .full-width-button {
        width: 100%;
    }
    .small-muted-text {
        font-size: 0.7rem;
        color: var(--color-hover-background);
    }
    .vertical-align-middle {
        vertical-align: middle;
    }
    .day-event-media {
        float: right;
        display: flex;
        flex-direction: column;
        gap: 2pt;
        margin: 0 0 5pt 5pt;
    }

    .map-frame {
        width: 100%;
        height: 100%;
        border-radius: 3pt;
    }
    .item-viewer-filename {
        position: absolute;
    }
    .acc-link {
        text-decoration: none;
    }

    .trip-details-container {
        position: relative;
        flex: 1;
    }

    .days {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        background-color: color-mix(in srgb, var(--color-background), transparent 20%);
        border: 1px solid var(--domain-color);

        .theme-link {
            color: var(--domain-color);
            background: var(--domain-alpha);
            text-decoration: underline;
        }
    }

    .day {
        display: grid;
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: var(--color-hover-background-alpha);
        }

        &:not(:last-child) {
            border-bottom: 1px solid var(--domain-alpha);
        }
    }

    .day-left,
    .day-right {
        display: flex;
        flex-direction: column;
    }

    .day-right {
        gap: 2px;
    }

    .day-foot {
        display: flex;
        flex-direction: row;
        margin-top: 0.5rem;
        align-items: center;
        color: var(--domain-color);
        gap: 10pt;
        align-items: flex-start;

        a {
            color: var(--domain-color);
        }
    }

    .explore-cover {
        background: var(--domain-alpha);
    }

    .iib-plain,
    .iib-decade,
    .btn-filter-domain{
        background: var(--domain-color);
        color: #fff;
    }

    .iib-decade:hover,
    .btn-filter-domain:active {
        background: var(--domain-strong);
    }

    .overview-item {
        padding: 3px 5px;
        text-decoration: none;
    }

    .maplibregl-popup-content a {
        color: var(--color-text);
        text-decoration: none;
    }

    .day-icon {
        background-color: var(--domain-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.3em;
        height: 1.3em;
        margin: 0 0.3em;
        border-radius: 50%;
        color: #fff;
        font-size: 0.7em;
        font-weight: 600;
        line-height: 1;
        vertical-align: middle;
    }

    .acc-icon {
        background-color: var(--domain-color);
        mask: url('images/house.svg') no-repeat center / contain;
        -webkit-mask: url('images/house.svg') no-repeat center / contain;
        width: 0.9em;
        height: 0.9em;
        display: inline-block;
        transform: translateY(2px);
    }

    .trip-flex {
        flex: 1;
    }

    .trip-day-event {
        font-size: 1.1em;
        margin: 0.5rem 0;
    }

  .trip-container {

    position: relative; 

    width: 100%;

  }


  #trip-container-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: -1;
  }


  #trip-container-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-background), transparent 60%), var(--color-background) 95%);
    z-index: 2;
  }
  #trip-container-cover {
    overflow: hidden;
  }

  #trip-container-cover img {
    width: 110%;
    height: auto;
    display: block;
  }


  .trip-container-content {
    position: relative;
    z-index: 10;
    padding: 20px;
    color: #000;
  }

}
body:has(#path-trip) {
	@media (max-width: 800px ) {
	#trip-side-navigator-open { display: none !important; }
	}
}

#path-images {}

#path-map {
	height:100%;

    select, select option {
        background-color: var(--color-background);
        color: var(--color-text);
    }
    
    .iib-map-ref {
        background-color: var(--domain-color);
        color: #fff;
        padding: 3pt 5pt;
        text-decoration: none;
    }
	.link-color {color:var(--domain-color);text-decoration:none;}
}
html:has(#path-map) {
	height:100%;
	body {height:100%;}
	section {max-width:none;margin:0!important;padding:0;}
	#app{flex:1;}
	#iib-foot{display:none;}
}

#path-dataset {

    display: flex;
    flex-direction: row;
    height: 100%;

.action-button.item-viewer-button {flex:1;}
.black-button{border:1px solid #fff;}

    details summary {
        cursor: pointer;
    }

    .details-content {
        background-color: var(--color-background);
        padding: 2pt;
        border-radius: 5pt;
    }

    .clickable {
        cursor: pointer;
    }

    .top-controls {
        display: flex;
        padding: 10pt 5pt 5pt 5pt;
        gap: 5pt;

    }

    #loading-overlay {
        display: none;
    }

    #loading-overlay img {
        width: 40px;
        height: 40px;
    }


    #editor-container {
        margin: 0 5pt 5pt 5pt;
        background-color: var(--color-background);
        border: 3pt solid var(--color-filter);
        border-radius: 3pt;
        max-height: 20%;
        overflow: auto;
    }
    .rotate-animation {
        animation: spin 1s linear infinite;
    }

    #left-column {
        display: flex;
        flex-direction: column;
        min-width: 150px;
        border-right: 1px solid var(--color-hover-background);
        padding:5pt;
        gap:2pt;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #right-column {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    #sql-output {
        flex: 1;
        overflow: hidden;
        padding-top:5pt;
    }

    #cellViewer {
    padding:3pt 5pt 3pt 5pt;margin:5pt;border-radius:3pt;font-size:0.8em;max-height:20%;overflow:auto;

    background-color:var(--color-submenu-background);
    }

    .tabulator {
        margin:0 5pt 5pt 5pt;
    }

    #sql-output-data .tabulator .tabulator-table .tabulator-cell.frozen {
        background-color: #e0e0e0;  /* same as header background */
        color: #000;                /* same as header text color */
        font-weight: bold;           /* optional for emphasis */
        border-right: 1px solid #ccc; /* match header border */
    }

    .hidden {display:none!important;}

    summary {color:var(--color-hover-text);padding:2pt;}
    details div {font-size:0.9em;padding:3pt;color:var(--color-text);}
    .clickable:hover {background-color:var(--color-filter);border-radius:3pt;color:var(--color-filter-text);}

    .inactivated-button {background-color:var(--color-hover-background) !important;color:var(--color-hover-text) !important;}

    .ͼb { color: var(--color-sql-command) !important; }
    .ͼd { color: red; }
    .ͼ2 .cm-gutters,
    .ͼ2 .cm-activeLineGutter {
        background-color: var(--color-background);
        color: var(--color-text);
    }

   .tabulator-range-active {}
}
html:has(#path-dataset), body:has(#path-dataset) {
    height: 100%;
    margin:0;
    section {max-width:100%!important;width:100%!important;margin:0!important;}
    #iib-foot{display:none;}
    #app {height: 100%;overflow: auto;}
	main{display:contents;}
}
body:has(#path-dataset) { background-color: var(--color-dataset-background); }
@keyframes spin {
    100% { transform: rotate(360deg); }
}

#path-search {

    details.search {
        background-color: var(--color-hover-background-alpha);
    }

    details.search summary {
        background-color: var(--color-hover-background);
        color:#fff;
        font-weight: bold;

        padding: 10pt;
    }

    details[open].search {

    }    

    .iib-search-domain {
        background-color: var(--domain-color);
        padding: 3pt 5pt 3pt 5pt;
        margin:2pt 0 2pt 0;
        color:#fff;
        text-align:center;
        text-decoration:none;
    }
    .iib-search-date {
        background-color: var(--color-hover-background);
        padding: 3pt 5pt 3pt 5pt;
        margin:2pt 0 2pt 0;
        color:#fff;
    }
    .day {
        display: grid;
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: var(--color-hover-background-alpha);
        }

        &:not(:last-child) {
            border-bottom: 1px solid var(--domain-alpha);
        }
    }

    .day-left,
    .day-right {
        display: flex;
        flex-direction: column;
    }

    .day-right {
        gap: 2px;
    }

    .day-foot {
        display: flex;
        flex-direction: row;
        margin-top: 0.5rem;
        align-items: center;
        color: var(--domain-color);

        a {
            color: var(--domain-color);
        }
    }

    .day-icon {
        background-color: var(--domain-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.3em;
        height: 1.3em;
        margin: 0 0.3em;
        border-radius: 50%;
        color: #fff;
        font-size: 0.7em;
        font-weight: 600;
        line-height: 1;
        vertical-align: middle;
    }

    .acc-icon {
        background-color: var(--domain-color);
        mask: url('images/house.svg') no-repeat center / contain;
        -webkit-mask: url('images/house.svg') no-repeat center / contain;
        width: 0.9em;
        height: 0.9em;
        display: inline-block;
        transform: translateY(2px);
    }

    .trip-flex {
        flex: 1;
    }

    .trip-day-event {
        font-size: 1.1em;
        margin: 0.5rem 0;
    }

    .acc-link {
        text-decoration: none;
    }

    .day-event-media {
        float: right;
        display: flex;
        flex-direction: column;
        gap: 2pt;
        margin: 0 0 5pt 5pt;
    }

}

#path-report-output {

    .frog-logo {
        height: 200pt;
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4));
        margin-top: 200pt;
    }

    .report-title {
        height: 100pt;
        margin-top: 100pt;
        line-height: 0;
        font-size: 30pt;
        font-family: 'Cairo', sans-serif;
    }

    h1 {font-family: 'Cairo', sans-serif;}

    .trip_header {
        color: #fff;
        padding: 1rem;
        margin-bottom: 4pt;
        /*background: var(--domain-color);*/
        background-image: repeating-linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 100%), linear-gradient(to bottom, var(--domain-color), var(--domain-color));
    }



    .query-param {
        height: 100pt;
        font-family: 'Cairo', sans-serif;
        font-size: 2em;
    }

    /* Table of Contents Styling */
    .toc-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .year-column {
        width: 1.5cm;
        font-size: 1.2em;
        font-weight: bold;
    }

    .id-wrapper {
        width: 3cm;
        display: inline-block;
        text-align: center;
    }

    .id-badge {
        padding: 2px 5px;
        border-radius: 4px;
        background-color: var(--domain-color);
        color: #fff;
    }

    .destination-label {
        font-weight: bold;
        margin-left: 10px;
    }

    .link {
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
    }

    .column-stack {
        display: flex;
        flex-direction: column;
        gap: 2pt;
    }
    .trip-layout {
        display: grid;
        grid-template-columns: 1fr; /* with map 1fr 1fr */
        gap: 4px;
    	background-color: color-mix(in srgb, var(--domain-color) 13%, transparent);
	margin-top:10pt;
	border-radius: var(--radius);
	padding: 5pt;
     }

    .row-flex {
        display: flex;
        gap: 2pt;
        flex-direction: row;
    }

    .trip-details-container {
        position: relative; flex: 1;
    }

    .trip-details-field {
        width: 100%;
        padding: 1.5rem 0.5rem 0.5rem 0.8rem;
        font-size: 1rem;
        border: 0;
        border-radius: 4px;
        box-sizing: border-box;
        background: var(--domain-alpha);
    }

    .trip-details-label {
        position: absolute;
        top: 0.3rem;
        left: 0.5rem;
        font-size: 0.8rem;
        color: var(--color-trip-label);
        padding: 0 4px;
        pointer-events: none;
    }
    .days {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        /*background-color: color-mix(in srgb, var(--color-background), transparent 20%);*/
        border: 1px solid var(--domain-color);

        .theme-link {
            color: var(--domain-color);
            background: var(--domain-alpha);
            text-decoration: underline;
        }
    }

    .day {
        display: grid;
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
        transition: background-color 0.2s ease;

        &:not(:last-child) {
            border-bottom: 1px solid var(--domain-alpha);
        }
    }

    .day-left,
    .day-right {
        display: flex;
        flex-direction: column;
    }

    .day-right {
        gap: 2px;
    }

    .day-foot {
        display: flex;
        flex-direction: row;
        margin-top: 0.5rem;
        align-items: center;
        color: var(--domain-color);
        gap: 10pt;
        align-items: flex-start;

        a {
            color: var(--domain-color);
        }
    }
    .day-label { white-space: nowrap; }

    .day-icon {
        background-color: var(--domain-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.3em;
        height: 1.3em;
        margin: 0 0.3em;
        border-radius: 50%;
        color: #fff;
        font-size: 0.7em;
        font-weight: 600;
        line-height: 1;
        vertical-align: middle;
    }

    .acc-icon {
        background-color: var(--domain-color);
        mask: url('images/house.svg') no-repeat center / contain;
        -webkit-mask: url('images/house.svg') no-repeat center / contain;
        width: 0.9em;
        height: 0.9em;
        display: inline-block;
        transform: translateY(2px);
    }

    .acc-link {
        text-decoration: none;
    }

    .trip-cover {
        height:12cm;
        position: absolute;
        display: flex;
        justify-items: flex-end;
        justify-content: flex-end;
        color: #fff;
        background: linear-gradient(to bottom, transparent 50%, var(--domain-color)), var(--cover-url), var(--domain-color);
        background-size: 110%;
        background-position: center;
        width:100%;
        flex-direction: column;
        border-radius: var(--radius);
        box-sizing: content-box;
    }


}
body:has(#path-report-output)::before {
	background:none;
}
body:has(#path-report-output) {
	background: none;
	nav#menu { display: none; }
	main { display: contents; } /* Needed for print */
	section#app { margin:0;padding:0; }
}

#print-control {
	position:fixed;
	z-index:1000;
	width:100%;
	background-color:#fdf8ee;
	padding:5pt;
}
@media print {
#print-control { display:none; }
}

@page {
    size: A4;
    font-family:Cairo, sans-serif;
}

@page :right {
    margin-left: 2cm;
    @bottom-right {
        content: counter(page, upper-roman);
    }
}

@page :left  {
    margin-right: 2cm;
    @bottom-left {
        content: counter(page, upper-roman);
    }
}

@page :first {
    margin:0;
    @bottom-right { content: none; }
    @bottom-left { content: none; }
}

@page title {
    margin:0;
    @bottom-center { content: none; }
    @bottom-right { content: none; }
}

.title-page {
    page: title;
    display: flex;
    flex-direction: column;
    padding-top: 90pt;
    justify-content: top;
    align-items: center;
}

#title-page-background {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 15cm;
background: #1d655e;
}

.blank-page, .toc { break-before: page;}
.toc a::after {
    margin-left: 0.5em;
}

@page final-page {
    @bottom-right { content: none; }
    @bottom-left { content: none; }
}
.final-page {
    page: final-page;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 90vh;
}
h1 { font-size:40pt; }

.trip-cover-header {
	font-family: 'Cairo', sans-serif;	
	font-size: 40pt;
	font-weight: bold;
	padding: 0 40pt;
	line-height: 1.2;
}
.trip-cover-sub-header {
	font-size: 16pt;
	padding: 7pt 40pt 20pt 40pt;
}
.trip-overview { padding-top:12cm; }

.trip-section::before {
/*	position: absolute;
	top: 0;
	left: 0;
	width: 100vh;
	height: 12cm;
	content: "";
	background-color: var(--domain-color);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
/*	background-image: var(--cover-url);
	background-repeat: no-repeat;
	background-size: contain;*/
}

.trip-section {
	position: relative;
    break-before: page;
}




#path-toolbox {

	#current_trip_documentation_status {
		border-radius: var(--radius-small);
		margin: 10pt;
		padding: 2pt;
	}

    details#trip_summary_inputs {
        border-radius: 12px;
        padding: 1rem;
        background: var(--color-hover-background-alpha);

        summary {
            color: var(--color-action-button-txt);
            font-weight: bold;
            padding: 1rem;
            background: var(--color-action-button-bg);
            cursor: pointer;
        }

        &[open] summary {
            margin-bottom: 0.5em;
        }
    }
    .trip-details-container {
        position: relative;
        flex: 1;
    }
    .trip-details-field {
        width: 100%;
        padding: 1.5rem 0.5rem 0.5rem 0.8rem;
        font-size: 1rem;
        border: 0;
        border-radius: 4px;
        box-sizing: border-box;
        background: var(--domain-alpha);
    }

    .trip-details-label {
        position: absolute;
        top: 0.3rem;
        left: 0.5rem;
        font-size: 0.8rem;
        color: var(--color-trip-label);
        padding: 0 4px;
        pointer-events: none;
    }
    input { background-color: var(--color-background-search);}
}



.moving-green-text {
    text-align:center;
    font-size: 2em;
    font-weight: bold;

    background: linear-gradient(
        90deg,
        var(--gradient-green),
        var(--gradient-gold),
        var(--gradient-green)
    );
    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: slide-gradient 3s linear infinite;
}

@keyframes slide-gradient {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}