/* ==========================================================================
   scroll-manager.css — Pure CSS scroll-snap replacement for fullpage.js 2.x
   ========================================================================== */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* Note: do NOT set overflow:hidden on html/body — it traps position:fixed popups */

/* ── Container: vertical scroll-snap ── */
#fullpage {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 0;
}
#fullpage::-webkit-scrollbar {
    display: none;
}

/* ── Sections: snap targets + horizontal slide grid ── */
#fullpage > .section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#fullpage > .section::-webkit-scrollbar {
    display: none;
}

/* ── Slides: grid items, each exactly one column wide ── */
#fullpage > .section > .slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #040c0e;   /* default dark bg so dots are visible */
    color: #e0e0e0;
}
#fullpage > .section > .slide > .card::-webkit-scrollbar,
#fullpage > .section > .slide > .card-body::-webkit-scrollbar {
    display: none;
}
#fullpage > .section > .slide.active {
    overflow-y: auto;
}

/* ── Vertical navigation dots (right side, replaces #fp-nav) ── */
#ds-nav {
    position: fixed;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 4000;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
}
#ds-nav .ds-dot {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: background-color 0.3s, border-color 0.3s !important;
    box-sizing: content-box !important;
    overflow: hidden !important;
    color: transparent !important;
}
#ds-nav .ds-dot:hover,
#ds-nav .ds-dot.active {
    background: #e06125 !important;
    border-color: #e06125 !important;
}
#ds-nav .ds-dot .ds-tooltip {
    position: absolute;
    top: -2px;
    right: 22px;
    color: #e06125;
    font-size: 14px;
    font-family: sans-serif, arial, helvetica, Microsoft JhengHei;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    opacity: 0;
    width: 0;
    cursor: pointer;
    transition: opacity 0.3s;
}
#ds-nav .ds-dot:hover .ds-tooltip,
#ds-nav .ds-dot.active .ds-tooltip {
    opacity: 1;
    width: auto;
}

/* ── Horizontal slide navigation dots (bottom, replaces .fp-slidesNav) ── */
.ds-slides-nav {
    position: fixed !important;
    bottom: 16px !important;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 8px;
    z-index: 9999;
    pointer-events: auto;
}
.ds-slides-nav .ds-sdot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: background-color 0.3s, border-color 0.3s;
}
.ds-slides-nav .ds-sdot:hover,
.ds-slides-nav .ds-sdot.active {
    background: #e06125;
    border-color: #e06125;
}

/* ── Make .card-body a scroll container; prevent scroll chaining to #fullpage ── */
#fullpage .card-body {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* ── Keep xterm terminal scrollbar visible ── */
#fullpage .xterm-viewport::-webkit-scrollbar {
    display: block !important;
    width: 10px;
}
#fullpage .xterm-viewport {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}

/* ── Bootstrap dropdown menus: ensure readable text ── */
.dropdown-menu {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
.dropdown-menu .dropdown-item {
    color: #e0e0e0;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* ── Keep toolbar icons above all slide content ── */
#fullpage .f_header {
    z-index: 100 !important;
    position: fixed !important;
}

/* ── Slide content: ensure dark background ── */
#fullpage .slide .card,
#fullpage .section > .card {
    background-color: #040c0e;
    color: #e0e0e0;
}

/* ── Control arrows (replaces .fp-controlArrow) ── */
#fullpage .ds-arrow {
    position: fixed !important;
    z-index: 9999;
    bottom: 4px;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    background: transparent;
    padding: 0;
    outline: none;
    display: none;
    pointer-events: auto;
}
.ds-arrow.ds-arrow-next {
    right: 10px;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #bb5858;
}
.ds-arrow.ds-arrow-prev {
    left: 10px;
    border-width: 20px 20px 20px 0;
    border-color: transparent rgb(250, 142, 19) transparent transparent;
}