/* From ui/templates/base/base.html */
body {
    background: var(--body-bg-color);
    background-size: cover;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--font-color);
    margin: 0;
    padding: 0;
    min-height: 100vh; /* lets main's flex-grow claim the slack so the footer sits at the bottom on short pages */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
}


/* Main content area */
main {
    margin-top: var(--ctm-header-h, 61px);
    padding: 0;
    flex-grow: 1;
    overflow-y: auto;
    height: auto;
}



/* Custom navbar with clean 768px breakpoint */
.custom-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.custom-navbar .navbar-toggler {
    display: none;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: var(--button-color);
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.custom-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    align-items: center;
    background-color: transparent !important;
}

.custom-navbar .navbar-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-left: auto;
}

/* Mobile behavior below 768px */
@media (max-width: 767.98px) {
    .custom-navbar .navbar-toggler {
        display: block !important;
    }

    .custom-navbar .navbar-collapse {
        display: none !important;
        flex-basis: 100%;
        flex-grow: 1;
        align-items: start;
        background-color: transparent !important;
    }

    .custom-navbar .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        background-color: transparent !important;
    }

    .custom-navbar .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        margin-left: 0;
    }
}

/* Responsive Design on mobile*/
@media (max-width: 767px) {
    .navbar-nav {
        display: block;
        text-align: center;
        width: 100%;
        height: 100vh;
        background-color: var(--body-bg-color);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        padding: 40px;
    }

    .navbar-nav a {
        display: block;
        padding: 20px;
        font-size: 1.5rem;
        color: var(--font-color);
    }

    .navbar-toggler {
        background-color: var(--button-color);
    }

    /* Custom white hamburger lines for the purple button */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Ensure hamburger button stays visible when menu is open */
    @media (max-width: 767.98px) {
        .custom-navbar .navbar-toggler {
            z-index: 2001 !important;
            position: fixed !important;
            top: 15px !important;
            right: 15px !important;
        }
    }

    /* Fix mobile user menu item alignment and styling */
    @media (max-width: 767.98px) {
        .nav-item .nav-link {
            text-align: left !important;
            padding: 0.5rem 1rem !important;
        }

        /* Ensure logout button matches other nav links */
        .nav-item button.nav-link {
            text-align: left !important;
            padding: 0.5rem 1rem !important;
            width: 100% !important;
        }

        /* Disable hover animations on mobile - just use background highlight */
        .nav-link:hover {
            transform: none !important; /* No movement */
            background-color: var(--nav-hover-bg) !important; /* Light purple highlight */
            transition: background-color 0.2s ease !important;
        }

        .nav-link:hover img {
            transform: none !important; /* No image scaling */
        }

        .nav-link:hover .nav-label {
            transform: none !important; /* No label movement */
        }

        /* Add spacing to first nav item to avoid hamburger button overlap */
        .custom-navbar .navbar-collapse.show .navbar-nav .nav-item:first-child {
            margin-top: 3rem !important;
        }

        /* Fix mobile scrolling bounce-back issues */
        body {
            overflow-x: hidden; /* Prevent horizontal scroll */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }

        /* Prevent elastic scrolling on containers */
        .app-main-content,
        .container-fluid {
            overscroll-behavior: none; /* Prevent bounce scrolling */
            -webkit-overflow-scrolling: touch;
        }

        /* Fix table container scrolling */
        .dash-table-container,
        .table-responsive {
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: none;
            padding-bottom: 2rem; /* Extra space at bottom */
        }

        /* Ensure main content has proper bottom padding */
        main {
            padding-bottom: 3rem !important; /* Extra space at bottom */
            min-height: calc(100vh - var(--ctm-header-h, 61px));
        }
    }


    main {
        margin-top: var(--ctm-header-h, 61px);
        margin-bottom: 40px;
        overflow-y: auto;
    }
}

    /* Header, product links and account menu: static/css/ui.css */

.dropdown-menu {
    border-radius: 6px;
    min-width: 160px;
}

.dropdown-item:hover {
    background-color: var(--nav-hover-bg);
}

.site-footer {
    border-top: 1px solid var(--ctm-line);
    background-color: var(--ctm-surface);
    padding: 14px 24px 16px;
    color: var(--ctm-ink-3);
    font-size: 12px;
    line-height: 1.5;
}

.site-footer-inner {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 20px;
}

.site-footer-name {
    font-weight: 600;
    color: var(--ctm-ink-2);
}

.site-footer-detail {
    flex: 1;
}

@media (max-width: 700px) {
    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}