/* =============================================
   SMA-HEADER.CSS — Public header reskin
   Scoped to #kt_header so Metronic's existing
   markup/JS (menu triggers, drawer) keeps working;
   the visual layer is restructured into a two-tier
   stack (utility row above a nav row) matching the
   WebServices dark-gradient header.
   ============================================= */

#kt_header.header {
    background: var(--sma-dark-gradient);
    border-bottom: 1px solid var(--sma-dark-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* ── Logo: white brand mark on the dark bar ── */
#kt_header .header-logo-img {
    height: 42px;
    width: auto;
}

/* ── Right cluster: utility row stacked above the nav row ── */
#kt_header .sma-header-right-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
}

/* ── Utility row (theme toggle · account/language · sign-in) ── */
#kt_header .sma-header-utility {
    display: flex;
    align-items: center;
    gap: .85rem;
}

#kt_header .sma-utility-divider {
    width: 1px;
    height: 18px;
    background: var(--sma-dark-divider);
    flex-shrink: 0;
}

#kt_header .sma-utility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    padding: 0 !important;
    border-radius: 50%;
    color: var(--sma-dark-text) !important;
    background: transparent !important;
    border: 1px solid var(--sma-dark-border);
    font-size: .95rem;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

    #kt_header .sma-utility-icon:hover,
    #kt_header .sma-utility-icon.show,
    #kt_header .sma-utility-icon[aria-expanded="true"] {
        color: var(--sma-primary) !important;
        border-color: var(--sma-primary) !important;
        background: rgba(205, 161, 118, 0.12) !important;
    }

/* ── Dropdown menus (theme mode / language / account) ──
   Force correct anchoring regardless of whether Metronic's JS
   (Popper) attaches successfully — pinned to the trigger's own
   .position-relative wrapper, never allowed to stretch full width. */
#kt_header .sma-header-utility .position-relative,
#kt_header #kt_header_user_menu_toggle {
    position: relative !important;
}

#kt_header .sma-header-utility .menu-sub-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: max-content !important;
    min-width: 160px !important;
    max-width: 260px !important;
    z-index: 1050 !important;
}

/* Primary sign-in / account pill */
#kt_header .header-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: .85rem;
    color: var(--sma-primary-text) !important;
    background: linear-gradient(135deg, var(--sma-primary), var(--sma-primary-dark));
    box-shadow: 0 3px 10px rgba(205, 161, 118, 0.30);
    text-decoration: none;
    border: none;
    white-space: nowrap;
    transition: all .22s ease;
}

    #kt_header .header-btn-primary:hover {
        box-shadow: 0 5px 16px rgba(205, 161, 118, 0.45);
        transform: translateY(-1px);
    }

/* ── Nav row ── */
#kt_header .header-menu-container {
    display: flex;
    align-items: center;
}

#kt_header .sma-nav-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

#kt_header .sma-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    color: var(--sma-dark-text) !important;
    background-color: transparent !important;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    text-decoration: none;
    transition: color .2s ease;
    white-space: nowrap;
}

    #kt_header .sma-nav-link::after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: .85rem;
        right: .85rem;
        height: 2px;
        background: var(--sma-primary);
        border-radius: 1px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .2s ease;
    }

    #kt_header .sma-nav-link:hover {
        color: var(--sma-primary) !important;
    }

        #kt_header .sma-nav-link:hover::after {
            transform: scaleX(1);
        }

/* Hamburger toggle */
#kt_header #kt_header_menu_toggle {
    color: var(--sma-dark-text);
    border: 1px solid var(--sma-dark-border);
    border-radius: 8px;
}

    #kt_header #kt_header_menu_toggle:hover {
        color: var(--sma-primary);
        border-color: var(--sma-primary);
    }

/* Mobile drawer panel: solid dark surface matching the bar */
.header-menu.drawer {
    background: var(--sma-dark-bg-bottom) !important;
}

    .header-menu.drawer .sma-nav-row {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: 1rem;
    }

    .header-menu.drawer .sma-nav-link {
        padding: .85rem 1rem;
    }

        .header-menu.drawer .sma-nav-link::after {
            display: none;
        }

/* Divider under the header */
#kt_header .separator {
    border-color: var(--sma-dark-divider) !important;
}

@media (max-width: 991.98px) {
    #kt_header .sma-header-right-stack {
        flex-direction: row;
        align-items: center;
    }

    #kt_header .sma-header-utility {
        gap: .5rem;
    }

    #kt_header .header-btn-primary span {
        display: none;
    }

    #kt_header .header-btn-primary {
        padding: .5rem;
        border-radius: 50%;
        width: 34px;
        height: 34px;
    }
}