/* Awssome UI 2.0 — app shell: sidebar, header, content column, mobile tab bar.
   #kt_app_sidebar / #kt_app_header ids are used on purpose: the Keen sidebar rules
   are deeply nested and !important, and an id is the one clean way to outrank them. */

[data-kt-app-sidebar-fixed=true] .app-wrapper {
    margin-left: var(--ui-sidebar-w) !important;
}

@media (min-width: 992px) {
    body:not([data-kt-app-header-fixed=true])[data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-header=true] .app-header {
        margin-left: var(--ui-sidebar-w) !important;
    }
}

@media (max-width: 991.98px) {
    [data-kt-app-sidebar-fixed=true] .app-wrapper {
        margin-left: 0 !important;
    }
}

/* Sidebar */
#kt_app_sidebar.main-sidebar-container {
    width: var(--ui-sidebar-w) !important;
    max-width: var(--ui-sidebar-w) !important;
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-line) !important;
    padding: 0 12px;
    box-shadow: none;
}

#kt_app_sidebar.main-sidebar-container .app-sidebar-logo {
    height: 72px;
    padding: 0 12px !important;
    border: 0 !important;
}

#kt_app_sidebar.main-sidebar-container .app-sidebar-logo img {
    height: 28px;
    width: auto !important;
    max-width: 140px !important;
}

#kt_app_sidebar.main-sidebar-container .app-sidebar-menu {
    margin-top: 0 !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link {
    min-height: 40px;
    padding: 8px 10px !important;
    margin: 1px 0 !important;
    border: 0 !important;
    border-radius: var(--ui-r-sm) !important;
    background: transparent !important;
    transition: background-color var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease);
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link .menu-title {
    font-family: var(--ui-font-medium) !important;
    font-size: 14px !important;
    color: var(--ui-ink-2) !important;
    letter-spacing: -0.006em;
    line-height: 1.3;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link .menu-icon {
    width: 20px;
    justify-content: center;
    flex: none;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link .menu-icon svg {
    width: 18px;
    height: 18px;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link .menu-icon svg path {
    stroke: var(--ui-subtle) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link .menu-icon.fill-icon svg path {
    fill: var(--ui-subtle) !important;
    stroke: transparent !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link:hover {
    background: var(--ui-fill) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link:hover .menu-title {
    color: var(--ui-ink) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.active {
    background: var(--ui-primary-tint) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.active .menu-title {
    color: var(--ui-ink) !important;
    font-family: var(--ui-font-semibold) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.active .menu-icon svg path {
    stroke: var(--ui-primary) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.active .menu-icon.fill-icon svg path {
    fill: var(--ui-primary) !important;
    stroke: transparent !important;
}

/* Group headers (Operations / Go-To-Market): quiet caps label, not a link look */
#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.parent-menu-link {
    min-height: 32px;
    margin-top: 12px !important;
    background: transparent !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.parent-menu-link .menu-title.text-uppercase {
    font-family: var(--ui-font-semibold) !important;
    font-size: 11px !important;
    letter-spacing: .08em;
    color: var(--ui-subtle) !important;
}

#kt_app_sidebar.main-sidebar-container .menu .menu-item .menu-link.parent-menu-link .menu-arrow {
    opacity: .5;
}

#kt_app_sidebar.main-sidebar-container .aws-separator.dashed {
    display: none;
}

#kt_app_sidebar.main-sidebar-container .menu-item-wrapper.position-sticky {
    background: var(--ui-surface) !important;
    border-top: 1px solid var(--ui-line-soft);
    padding-top: 8px !important;
    padding-bottom: 12px;
}

/* Header: floating, translucent, hairline once content scrolls under it */
#kt_app_header.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--ui-header-h) !important;
    min-height: var(--ui-header-h);
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: rgba(247, 247, 248, .82) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition: border-color var(--ui-base) var(--ui-ease);
}

#kt_app_header.app-header.ui-scrolled {
    border-bottom-color: var(--ui-line) !important;
}

#kt_app_header > .app-container {
    padding: 0 var(--ui-gutter) !important;
    align-items: center !important;
}

#kt_app_header .breadcrumb {
    margin: 0;
    font-size: 13px !important;
}

#kt_app_header .breadcrumb a,
#kt_app_header .breadcrumb span {
    font-family: var(--ui-font-medium) !important;
    font-size: 13px !important;
}

.page-title .breadcrumb .aws-color-primary-500,
#kt_app_header .breadcrumb .aws-color-primary-500 {
    color: var(--ui-ink) !important;
    font-family: var(--ui-font-semibold) !important;
}

#kt_app_header .app-navbar .app-navbar-item > .menu-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-r-pill);
    transition: background var(--ui-fast) var(--ui-ease);
}

#kt_app_header .app-navbar .app-navbar-item > .menu-link:hover {
    background: rgba(0, 0, 0, .05);
}

#kt_app_header .app-navbar .symbol img,
#kt_app_header #sidebarProfilePicture {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 3px var(--ui-line);
}

#kt_app_header .btn.aws-btn-pathfinder {
    border-radius: var(--ui-r-pill) !important;
    min-height: 38px;
    padding: 4px 8px 4px 12px !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

#kt_app_header .btn.aws-btn-pathfinder.aws-error {
    background: var(--ui-red-50) !important;
    border-color: #FECDCA !important;
}

#kt_app_header .btn.aws-btn-pathfinder .me-8 {
    margin-right: 8px !important;
}

/* Content column */
/* The legacy layout scrolls INSIDE .aws-app-container (fixed height, overflow-y auto) and
   several page scripts scroll that element directly, so the bottom breathing room must live
   inside the scroller. Padding on #kt_app_content would sit outside it and make the whole
   document scroll by that amount while clipping the scroller's last 48px. */
#kt_app_content {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
}

#kt_app_content_container.aws-app-container {
    /* containing block for every absolutely positioned descendant (Select2's hidden
       <select>, tooltips…): otherwise they resolve against #kt_app_main, outside the
       scroller, and stretch the document by their flow offset. */
    position: relative;
    height: calc(100vh - var(--ui-header-h) - 8px);
    padding: 0 var(--ui-gutter) 48px !important;
    max-width: 1480px;
    margin: 0 auto;
}

.app-main {
    overflow: visible !important;
    min-width: 0;
}

/* Safety net: nothing inside the content column may push the page sideways.
   (clip, not hidden: it creates no scroll container, so sticky still works) */
#kt_app_wrapper {
    overflow-x: clip;
}

/* Mobile header */
@media (max-width: 991.98px) {
    #kt_app_header .app-navbar .btn.aws-btn-pathfinder .menu-title,
    #kt_app_header .app-navbar .btn.aws-btn-pathfinder .menu-subtext {
        display: none !important;
    }

    #kt_app_header .app-navbar .btn.aws-btn-pathfinder .me-8 {
        margin-right: 0 !important;
    }

    #kt_app_header .app-navbar-item.ms-4,
    #kt_app_header .app-navbar-item.ms-5 {
        margin-left: 8px !important;
    }

    #kt_app_sidebar.main-sidebar-container {
        border-radius: 0 var(--ui-r-2xl) var(--ui-r-2xl) 0;
        box-shadow: var(--ui-shadow-lg);
    }

    .drawer-overlay {
        background: rgba(20, 20, 24, .4) !important;
        backdrop-filter: blur(2px);
    }

    /* room for the floating tab bar (64px + 12px offset + safe area) */
    #kt_app_content_container.aws-app-container {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    #kt_app_header img.h-25px {
        height: 22px !important;
    }

    #kt_app_content_container > .page-title {
        margin-bottom: 4px !important;
    }
}

@media (max-width: 767.98px) {
    /* Fixed Keen widths (w-300px on search boxes, w-275px on selects…) become fluid */
    #kt_app_content_container .w-200px, #kt_app_content_container .w-250px,
    #kt_app_content_container .w-275px, #kt_app_content_container .w-300px,
    #kt_app_content_container .w-350px, #kt_app_content_container .w-400px,
    #kt_app_content_container .w-450px, #kt_app_content_container .w-500px,
    #kt_app_content_container .min-w-300px, #kt_app_content_container .min-w-350px,
    #kt_app_content_container .mw-500px {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Legacy css/steps.css (loaded by product details / dashboard overview) pushes the
   navbar 270px left on every page it loads; the new header lays itself out. */
#kt_app_header .app-navbar {
    margin-right: 0 !important;
}

/* Scroll-to-top sits above the mobile tab bar instead of under it */
.scrolltop {
    border-radius: var(--ui-r-pill) !important;
    background: var(--ui-ink) !important;
    box-shadow: var(--ui-shadow-md);
}

@media (max-width: 991.98px) {
    .scrolltop {
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }
}

/* Sidebar footer (Settings + Help) was position:sticky inside the scrolling menu and painted
   over the Go-To-Market group on short screens. It now flows after the menu; on tall screens
   the menu's justify-content: space-between still keeps it at the bottom. */
#kt_app_sidebar.main-sidebar-container .menu-item-wrapper.position-sticky {
    position: static !important;
}

@media (max-width: 991.98px) {
    /* mobile drawer has no logo row: give the first card breathing room */
    #kt_app_sidebar.main-sidebar-container {
        padding-top: 16px !important;
    }
}

@media (max-width: 767.98px) {
    /* Breadcrumb on phones: one line; earlier crumbs shrink with an ellipsis, the current
       page keeps its full label. */
    #kt_app_content_container > .page-title .breadcrumb > li {
        flex-wrap: nowrap !important;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    #kt_app_content_container > .page-title .breadcrumb > li > a,
    #kt_app_content_container > .page-title .breadcrumb > li > span:not(:last-child) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    #kt_app_content_container > .page-title .breadcrumb > li > span:last-child {
        white-space: nowrap;
        flex: none;
    }
}