@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400&display=swap');

/* Bright, light-flooded scandinavian cabin atmosphere */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f4f6f8;
    color: #2d3139;
    letter-spacing: -0.01em;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.cockpit-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Frameless light input fields */
input[type="text"] {
    background-color: #e8ecef;
    border: none;
    color: #2d3139;
    border-radius: 8px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

input[type="text"]:focus {
    background-color: #dfe4e8;
    outline: none;
}

/* Autocomplete suggestion container */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f4f6f8;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-suggestion {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.15s ease;
}

.autocomplete-suggestion:hover {
    background-color: #e8ecef;
}

/* Minimalist scandinavian dropdown selectors */
select {
    background-color: transparent;
    border: none;
    color: #64748b;
    appearance: none;
    padding-right: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'></path></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}

select:focus {
    outline: none;
    color: #2d3139;
}

.seamless-row {
    border-bottom: 1px solid #e8ecef;
}

/* Base State: Fade out ONLY at the bottom */
.scroll-fade-zone {
    position: relative;
    max-height: 220px;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
    transition: -webkit-mask-image 0.15s ease, mask-image 0.15s ease;
}

/* State 1: Scrolled down a bit -> Fade out at the TOP */
.scroll-fade-zone.fade-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}

/* State 2: In the middle -> Fade out TOP AND BOTTOM */
.scroll-fade-zone.fade-both {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* State 3: Fully scrolled to the bottom -> NO FADE AT ALL (Solid) */
.scroll-fade-zone.fade-none {
    -webkit-mask-image: none;
    mask-image: none;
}

.scroll-fade-zone::-webkit-scrollbar {
    width: 0px;
}
.scroll-fade-zone {
    -ms-overflow-style: none;
    scrollbar-width: none;
}