/* ============================================================================
   gb-sidebar.css - the app sidebar (header / menu / footer)

   Everything is scoped under #kt_app_sidebar so it outranks the Metronic bundle, the
   [data-kt-app-layout=dark-sidebar] rules in override.css and the inline <style> in
   _SidebarMenu.razor without fighting them on load order.

   Colours come from the tenant theme (--kt-primary, set per website in _Master.cshtml), so
   each website keeps its own accent; the --sb-* tokens below are the only place light and
   dark mode differ.
   ============================================================================ */

#kt_app_sidebar {
    --sb-bg: #ffffff;
    --sb-border: #eef0f4;
    --sb-text: #4b5563;
    --sb-muted: #8a8fa3;
    --sb-accent: var(--kt-primary);
    --sb-hover: color-mix(in srgb, var(--kt-primary) 7%, transparent);
    --sb-active-bg: color-mix(in srgb, var(--kt-primary) 12%, transparent);
    --sb-icon-bg: color-mix(in srgb, var(--kt-primary) 9%, transparent);
    --sb-field-bg: #f4f5f8;

    background: var(--sb-bg) !important;
    border-inline-end: 1px solid var(--sb-border) !important;
}

[data-theme="dark"] #kt_app_sidebar {
    --sb-bg: #1a1a2e;
    --sb-border: #2b2b40;
    --sb-text: #cdcdde;
    --sb-muted: #8a8aa3;
    --sb-accent: color-mix(in srgb, var(--kt-primary) 55%, #ffffff);
    --sb-hover: rgba(255, 255, 255, .05);
    --sb-active-bg: color-mix(in srgb, var(--kt-primary) 22%, transparent);
    --sb-icon-bg: color-mix(in srgb, var(--kt-primary) 18%, transparent);
    --sb-field-bg: rgba(255, 255, 255, .06);
}

/* ---- Header: logo + website name ---------------------------------------- */
#kt_app_sidebar .app-sidebar-logo {
    height: auto !important;
    min-height: 88px;
    padding: 1rem 1.25rem !important;
    background: transparent !important;
    border-bottom: 1px solid var(--sb-border) !important;
}

#kt_app_sidebar .gb-sidebar-brand-name {
    color: var(--sb-accent);
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.35;
    text-align: center;
}

/* ---- Menu items ---------------------------------------------------------- */
#kt_app_sidebar .menu .menu-item .menu-link {
    position: relative;
    margin-block: 2px;
    padding: .55rem .7rem;
    border-radius: 10px;
    color: var(--sb-text) !important;
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease;
}

#kt_app_sidebar .menu .menu-item .menu-link .menu-title {
    color: inherit !important;
    opacity: 1 !important;
    font-size: .93rem;
    font-weight: 600;
}

#kt_app_sidebar .menu .menu-item .menu-link:hover:not(.disabled) {
    background: var(--sb-hover) !important;
    color: var(--sb-accent) !important;
}

/* Current page: tinted pill plus an accent bar on the inline-start edge. */
#kt_app_sidebar .menu .menu-item .menu-link.active,
#kt_app_sidebar .menu .menu-item .menu-link.gb-active-child {
    background: var(--sb-active-bg) !important;
    color: var(--sb-accent) !important;
    font-weight: 700;
}

#kt_app_sidebar .menu .menu-item .menu-link.active::before,
#kt_app_sidebar .menu .menu-item .menu-link.gb-active-child::before {
    content: "";
    position: absolute;
    inset-block: 22%;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--kt-primary);
}

/* Open section: its title takes the accent so you can see where you are. */
#kt_app_sidebar .menu .menu-item.show > .menu-link,
#kt_app_sidebar .menu .menu-item.here > .menu-link {
    color: var(--sb-accent) !important;
}

#kt_app_sidebar .menu .menu-item .menu-link .menu-arrow::after {
    background-color: var(--sb-muted) !important;
}

#kt_app_sidebar .menu .menu-item.show > .menu-link .menu-arrow::after,
#kt_app_sidebar .menu .menu-item.here > .menu-link .menu-arrow::after {
    background-color: var(--sb-accent) !important;
}

/* Section icons sit in a soft accent chip. */
#kt_app_sidebar .menu .menu-link .menu-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-inline-end: .65rem;
    border-radius: 9px;
    background: var(--sb-icon-bg);
}

#kt_app_sidebar .menu .menu-link .menu-icon .svg-icon,
#kt_app_sidebar .menu .menu-link .menu-icon > i {
    color: var(--sb-accent) !important;
    font-size: 1rem;
    line-height: 1;
}

/* Sub-menu: a guide line instead of deep indentation. */
#kt_app_sidebar .menu .menu-sub.menu-sub-accordion {
    margin-inline-start: 1.55rem;
    padding-inline-start: .45rem;
    border-inline-start: 1px dashed var(--sb-border);
}

#kt_app_sidebar .menu .menu-sub .menu-link .menu-title {
    font-size: .9rem;
    font-weight: 500;
}

#kt_app_sidebar .menu .menu-bullet .bullet-dot {
    background-color: var(--sb-muted) !important;
}

#kt_app_sidebar .menu .menu-link.active .bullet-dot,
#kt_app_sidebar .menu .menu-link.gb-active-child .bullet-dot {
    background-color: var(--kt-primary) !important;
}

/* ---- Page search ----------------------------------------------------------- */
#kt_app_sidebar #kt_sidebar_search_toggle_container .form-control {
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--sb-field-bg) !important;
    color: var(--sb-text);
    font-size: .9rem;
}

#kt_app_sidebar #kt_sidebar_search_toggle_container .form-control:focus {
    border-color: color-mix(in srgb, var(--kt-primary) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kt-primary) 12%, transparent);
}

#kt_app_sidebar #kt_sidebar_search_toggle {
    border-radius: 10px;
}

#kt_app_sidebar .gb-sidebar-loading {
    color: var(--sb-muted);
}

/* ---- Footer: signed-in user ------------------------------------------------ */
#kt_app_sidebar .gb-sidebar-footer {
    padding: .75rem .9rem 1rem;
    border-top: 1px solid var(--sb-border);
}

#kt_app_sidebar .gb-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: 12px;
    background: var(--sb-field-bg);
}

#kt_app_sidebar .gb-sidebar-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--kt-primary);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
}

#kt_app_sidebar .gb-sidebar-user-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

#kt_app_sidebar .gb-sidebar-user-name,
#kt_app_sidebar .gb-sidebar-user-meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#kt_app_sidebar .gb-sidebar-user-name {
    color: var(--sb-text);
    font-weight: 700;
    font-size: .88rem;
}

#kt_app_sidebar .gb-sidebar-user-meta {
    color: var(--sb-muted);
    font-size: .78rem;
}

#kt_app_sidebar .gb-sidebar-footer-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-muted);
    transition: background-color .15s ease, color .15s ease;
}

#kt_app_sidebar .gb-sidebar-footer-btn:hover,
#kt_app_sidebar .gb-sidebar-footer-btn:focus-visible {
    background: var(--sb-hover);
    color: var(--sb-accent);
}

#kt_app_sidebar .gb-sidebar-footer-btn.gb-sidebar-signout:hover,
#kt_app_sidebar .gb-sidebar-footer-btn.gb-sidebar-signout:focus-visible {
    background: color-mix(in srgb, #e2506e 12%, transparent);
    color: #e2506e;
}

/* ---- Scrollbar ------------------------------------------------------------- */
#kt_app_sidebar .app-sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--sb-muted) 40%, transparent) transparent;
}