/* MySP User Menu — avatar dropdown di header */
.mysp-um {
    --mysp-um-accent: #2271b1;
    --mysp-um-border: #e2e5ea;
    --mysp-um-text: #1d2327;
    --mysp-um-muted: #6b7280;

    position: relative !important;
    display: flex;
    align-items: center;
    align-self: center;
    height: auto;
    margin-left: auto;          /* dorong ke paling kanan pada menu flex */
    list-style: none;
}

.mysp-um-standalone { display: flex; justify-content: flex-end; }

.mysp-um-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--mysp-um-size, 36px) + 4px);
    height: calc(var(--mysp-um-size, 36px) + 4px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.mysp-um .mysp-um-toggle,
.mysp-um .mysp-um-toggle:hover,
.mysp-um .mysp-um-toggle:focus,
.mysp-um .mysp-um-toggle:active,
.mysp-um .mysp-um-toggle[aria-expanded="true"] {
    background: transparent !important;
    background-image: none !important;
    color: var(--mysp-um-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.mysp-um .mysp-um-toggle:focus-visible { outline: 2px solid var(--mysp-um-accent); outline-offset: -2px; }

.mysp-um-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mysp-um-size, 36px);
    height: var(--mysp-um-size, 36px);
    border-radius: 50%;
    overflow: hidden;
    background: #e9ecef;
    color: #6b7280;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow .15s ease;
}

.mysp-um-avatar img {
    display: block;
    width: var(--mysp-um-size, 36px) !important;
    height: var(--mysp-um-size, 36px) !important;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

.mysp-um-toggle:hover .mysp-um-avatar,
.mysp-um.is-open .mysp-um-avatar { box-shadow: 0 0 0 2px var(--mysp-um-accent); }

.mysp-um .mysp-um-dropdown {
    position: absolute !important;
    display: none;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    margin: 6px 0 0 !important;
    z-index: 99999;
    min-width: 200px;
    width: max-content;
    max-width: 280px;
    padding: 6px;
    line-height: 1.3;
    background: var(--mysp-um-dd-bg, #fff);
    font-family: var(--mysp-um-dd-font, inherit);
    border: 1px solid var(--mysp-um-border);
    border-radius: var(--mysp-um-dd-radius, 12px);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
    text-align: left;
    opacity: 1 !important;
    visibility: visible !important;
}

/* jembatan transparan agar hover tidak putus di celah toggle -> dropdown */
.mysp-um .mysp-um-dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }

.mysp-um.is-open > .mysp-um-dropdown,
.mysp-um:focus-within > .mysp-um-dropdown { display: block; }

@media (hover: hover) {
    .mysp-um:hover > .mysp-um-dropdown { display: block; }
    .mysp-um:hover .mysp-um-avatar { box-shadow: 0 0 0 2px var(--mysp-um-accent); }
}


.mysp-um .mysp-um-head {
    display: flex;
    flex-direction: column;
    padding: 6px 12px 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--mysp-um-border);
    font-size: var(--mysp-um-dd-size, 14px);
    line-height: 1.35;
    color: var(--mysp-um-dd-text, var(--mysp-um-text));
}
.mysp-um-head span { font-size: calc(var(--mysp-um-dd-size, 14px) - 2px); color: var(--mysp-um-dd-muted, var(--mysp-um-muted)); overflow: hidden; text-overflow: ellipsis; }

.mysp-um .mysp-um-dropdown a {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 0;
    border-radius: var(--mysp-um-dd-item-radius, 8px);
    font-size: var(--mysp-um-dd-size, 14px) !important;
    line-height: 1.3 !important;
    color: var(--mysp-um-dd-text, var(--mysp-um-text));
    text-decoration: none;
    white-space: nowrap;
}
.mysp-um .mysp-um-dropdown a:hover,
.mysp-um .mysp-um-dropdown a:focus-visible { background: var(--mysp-um-dd-hover-bg, #f1f5f9); color: var(--mysp-um-dd-hover-text, var(--mysp-um-accent)); outline: none; }

/* Label nama: hanya tampil di mode bertumpuk (menu vertikal / mobile) */
.mysp-um-label { display: none; }

/* ==========================================================
   Mode bertumpuk (class ditambah JS bila menu tema vertikal).
   Avatar + nama jadi satu baris, dropdown terbuka inline di bawahnya.
========================================================== */
.mysp-um.mysp-um-stacked {
    --mysp-um-indent: 20px;   /* sejajarkan dengan teks menu tema */
    display: block;
    width: 100%;
    margin-left: 0;
}

.mysp-um-stacked .mysp-um-toggle {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px var(--mysp-um-indent);
    border-radius: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
}

.mysp-um-stacked .mysp-um-label { display: inline; font-size: inherit; }

/* Panah (chevron) seperti item menu tema */
.mysp-um-stacked .mysp-um-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.mysp-um-stacked.is-open .mysp-um-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.mysp-um.mysp-um-stacked.is-open .mysp-um-toggle,
.mysp-um.mysp-um-stacked.is-open .mysp-um-toggle:hover,
.mysp-um.mysp-um-stacked.is-open .mysp-um-toggle:focus { color: var(--mysp-um-accent) !important; }

.mysp-um.mysp-um-stacked .mysp-um-dropdown {
    position: static !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: var(--mysp-um-dd-bg, rgba(0, 0, 0, .04));
    box-shadow: none;
}

.mysp-um-stacked .mysp-um-dropdown::before { display: none; }
.mysp-um-stacked .mysp-um-head { display: none; }

.mysp-um.mysp-um-stacked .mysp-um-dropdown a {
    padding: 9px var(--mysp-um-indent) 9px calc(var(--mysp-um-indent) + 46px) !important;
    background: transparent !important;
    font-weight: 600;
    border-radius: 0;
}

/* Hover tidak membuka dropdown di mode bertumpuk (pakai tap) */
@media (hover: hover) {
    .mysp-um-stacked:hover > .mysp-um-dropdown { display: none; }
    .mysp-um-stacked.is-open > .mysp-um-dropdown { display: block; }
}


/* ==========================================================
   Mode float: terpisah dari menu, pojok kanan header
========================================================== */
.mysp-um-float-root { display: contents; }

.mysp-um.mysp-um-float {
    position: absolute !important;
    /* --mysp-um-top diisi JS (px, sejajar tombol hamburger) agar avatar tidak ikut
       turun saat menu mobile membuka dan header memanjang. Default 50% untuk desktop. */
    top: var(--mysp-um-top, 50%);
    right: var(--mysp-um-right, var(--mysp-um-right-base, 16px));
    transform: translateY(-50%);
    margin: var(--mysp-um-offset-y, 0px) 0 0;
    z-index: 99990;
}

/* Cadangan bila header tidak ditemukan: menempel di pojok kanan atas layar */
.mysp-um.mysp-um-float.mysp-um-fixed {
    position: fixed !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
    transform: none;
}

/* Ruang di kanan header agar menu tidak tertimpa avatar */
.mysp-um-host { position: relative; }