/*
 * NICTBD V31 — Global fixed header and panel topbar layer.
 * Loaded after legacy/page CSS so every public, merchant and admin screen
 * keeps its navigation visible without layout overlap.
 */

:root {
    --nictbd-public-header-height: 104px;
    --nictbd-panel-header-height: 70px;
}

html {
    scroll-padding-top: calc(var(--nictbd-public-header-height) + 16px);
}

/* Public website: top notice bar + main navigation stay fixed together. */
.site-global-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2147481000 !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    isolation: isolate;
}

.site-global-header + #main-content,
#main-content {
    padding-top: var(--nictbd-public-header-height) !important;
}

.site-global-header #mobileMenu {
    max-height: calc(100dvh - var(--nictbd-public-header-height) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Merchant panel: fixed top workspace header with desktop sidebar offset. */
.merchant-wrapper .merchant-header {
    position: fixed !important;
    top: 0 !important;
    left: 252px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1300 !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.merchant-wrapper .merchant-main {
    padding-top: var(--nictbd-panel-header-height) !important;
}

/* Admin panel: fixed control topbar with desktop sidebar offset. */
.admin-shell .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 270px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1000 !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.admin-shell .main {
    padding-top: var(--nictbd-panel-header-height) !important;
}

/* Anchored sections remain visible below fixed panel headers. */
.merchant-content [id],
.admin-shell .content [id] {
    scroll-margin-top: calc(var(--nictbd-panel-header-height) + 16px);
}

@media (max-width: 991.98px) {
    :root {
        --nictbd-public-header-height: 100px;
    }

    .site-global-header #mobileMenu {
        max-height: calc(100dvh - var(--nictbd-public-header-height) - 8px);
    }

    .merchant-wrapper .merchant-header {
        left: 0 !important;
    }
}

@media (max-width: 860px) {
    .admin-shell .topbar {
        left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --nictbd-panel-header-height: 66px;
    }

    .site-global-header {
        box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }

    .merchant-wrapper .merchant-main,
    .admin-shell .main {
        padding-top: var(--nictbd-panel-header-height) !important;
    }

    .admin-shell .topbar {
        min-height: var(--nictbd-panel-header-height) !important;
        height: var(--nictbd-panel-header-height) !important;
    }
}

/* iOS safe-area support. */
@supports (padding-top: env(safe-area-inset-top)) {
    .site-global-header {
        padding-top: env(safe-area-inset-top);
    }

    #main-content {
        padding-top: calc(var(--nictbd-public-header-height) + env(safe-area-inset-top)) !important;
    }
}