/* AmbilTugas — Sidebar menu. PC & tablet: menempel di kiri. HP: panel geser saat tombol garis tiga ditekan (menu bawah HP tidak berubah). */
:root {
    --at-sb-full: 232px;
    --at-sb-mini: 72px;
    --at-sb-w: var(--at-sb-mini);
    --at-sb-bg: #ffffff;
    --at-sb-line: #e6ebf2;
    --at-sb-text: #3b4656;
    --at-sb-muted: #7a8596;
    --at-sb-hover: #f1f6fd;
    --at-sb-brand: var(--at-brand, #0c70de);
    --at-sb-grad: var(--at-grad, linear-gradient(135deg, #0c70de 0%, #22b8ff 100%));
    --at-sb-top: var(--wp-admin--admin-bar--height, 0px);
}
body.retheme-dark-scheme {
    --at-sb-bg: #121a27;
    --at-sb-line: #223047;
    --at-sb-text: #d5deea;
    --at-sb-muted: #8c99ab;
    --at-sb-hover: #1b2638;
}
.at-sb, .at-sb__close, .at-sb-back { display: none; }


@media (min-width: 768px) {
    html.at-sbs--auto { --at-sb-w: var(--at-sb-mini); }
    html.at-sbs--full { --at-sb-w: var(--at-sb-full); }
    html.at-sbs--mini { --at-sb-w: var(--at-sb-mini); }

    html.at-sbon body { padding-left: var(--at-sb-w); transition: padding-left .2s ease; }
    /* Menu bawah HP tidak dipakai lagi di tablet karena sudah ada sidebar */
    html.at-sbon .at-bottombar { display: none !important; }
    html.at-sbon body.ambiltugas-has-bar { padding-bottom: 0; }
    /* Dashboard: menu kiri bawaan dashboard disembunyikan (sudah ada di sidebar) */
    html.at-sbon .at-dash { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "body" !important; }
    html.at-sbon .at-dash__nav { display: none !important; }

    .at-sb {
        position: fixed; z-index: 99990; top: var(--at-sb-top); left: 0; bottom: 0; width: var(--at-sb-w);
        display: flex; flex-direction: column; gap: .35rem; padding: .85rem .6rem; overflow-x: hidden; overflow-y: auto;
        background: var(--at-sb-bg); border-right: 1px solid var(--at-sb-line); box-shadow: 2px 0 18px rgba(15, 35, 70, .05);
        font-family: inherit; font-size: 15px; line-height: 1.3; transition: width .2s ease, transform .2s ease;
        scrollbar-width: thin;
    }
    .at-sb a { text-decoration: none !important; }
    .at-sb__ic { flex: 0 0 22px; width: 22px; height: 22px; }

    .at-sb__top { display: grid; gap: .5rem; padding-bottom: .65rem; border-bottom: 1px solid var(--at-sb-line); margin-bottom: .25rem; }
    .at-sb__user { display: flex; align-items: center; gap: .65rem; padding: .3rem .35rem; border-radius: 12px; color: var(--at-sb-text) !important; }
    .at-sb__user:hover { background: var(--at-sb-hover); }
    .at-sb .at-avatar { flex: 0 0 36px; width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--at-sb-grad); color: #fff; font-weight: 700; }
    .at-sb__who { display: grid; min-width: 0; }
    .at-sb__who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
    .at-sb__who small, .at-sb__tag small { color: var(--at-sb-muted); font-size: .78rem; }
    .at-sb__tag { margin: 0; padding: .25rem .4rem; display: grid; gap: .15rem; color: var(--at-sb-text); }
    .at-sb__balance { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 12px; color: #fff !important; font-weight: 700; background: var(--at-sb-grad); box-shadow: 0 4px 14px rgba(12, 112, 222, .22); white-space: nowrap; }

    .at-sb__nav { display: grid; gap: 2px; }
    .at-sb__link { display: flex; align-items: center; gap: .75rem; padding: .62rem .7rem; border-radius: 12px; color: var(--at-sb-text) !important; white-space: nowrap; font-weight: 500; }
    .at-sb__link:hover { background: var(--at-sb-hover); color: var(--at-sb-brand) !important; }
    .at-sb__link.is-active { background: color-mix(in srgb, var(--at-sb-brand) 11%, transparent); color: var(--at-sb-brand) !important; font-weight: 700; }
    .at-sb__sep { border: 0; border-top: 1px solid var(--at-sb-line); margin: .4rem .3rem; }
    .at-sb__cta { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; padding: .7rem; border-radius: 12px; color: #fff !important; font-weight: 700; background: var(--at-sb-grad); white-space: nowrap; }

    .at-sb__ctrl { margin-top: auto; display: grid; gap: 2px; padding-top: .5rem; border-top: 1px solid var(--at-sb-line); }
    .at-sb__btn { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--at-sb-muted); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; white-space: nowrap; }
    .at-sb__btn:hover { background: var(--at-sb-hover); color: var(--at-sb-text); }
    .at-sb__btn:focus-visible, .at-sb__link:focus-visible { outline: 2px solid var(--at-sb-brand); outline-offset: 2px; }
    .at-sb__chev { transition: transform .2s ease; }

    /* Mode ciut: ikon saja */
    html.at-sbs--mini .at-sb__label, html.at-sbs--auto .at-sb__label { display: none; }
    html.at-sbs--mini .at-sb__user, html.at-sbs--auto .at-sb__user,
    html.at-sbs--mini .at-sb__link, html.at-sbs--auto .at-sb__link,
    html.at-sbs--mini .at-sb__balance, html.at-sbs--auto .at-sb__balance,
    html.at-sbs--mini .at-sb__btn, html.at-sbs--auto .at-sb__btn,
    html.at-sbs--mini .at-sb__cta, html.at-sbs--auto .at-sb__cta { justify-content: center; padding-left: 0; padding-right: 0; }
    html.at-sbs--mini .at-sb__chev, html.at-sbs--auto .at-sb__chev { transform: rotate(180deg); }

    .at-sb { display: flex; }
}

@media (min-width: 1200px) {
    html.at-sbs--auto { --at-sb-w: var(--at-sb-full); }
    html.at-sbs--auto .at-sb__label { display: initial; }
    html.at-sbs--auto .at-sb__who { display: grid; }
    html.at-sbs--auto .at-sb__tag { display: grid; }
    html.at-sbs--auto .at-sb__user, html.at-sbs--auto .at-sb__link, html.at-sbs--auto .at-sb__balance, html.at-sbs--auto .at-sb__btn { justify-content: flex-start; padding-left: .7rem; padding-right: .7rem; }
    html.at-sbs--auto .at-sb__user { padding-left: .35rem; }
    html.at-sbs--auto .at-sb__cta { padding: .7rem; }
    html.at-sbs--auto .at-sb__chev { transform: none; }
}
html.at-sbs--full .at-sb__who, html.at-sbs--full .at-sb__tag { display: grid; }

@media (prefers-reduced-motion: reduce) { .at-sb, html.at-sbon body, .at-sb__chev { transition: none; } }

/* Menu tema + pencarian artikel (di sidebar lebar & panel HP) */
.at-sb__more { display: grid; gap: .45rem; padding-top: .55rem; margin-top: .3rem; border-top: 1px solid var(--at-sb-line); }
.at-sb__more-title { margin: 0 .4rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--at-sb-muted); }
.at-sb__search input { width: 100%; box-sizing: border-box; padding: .55rem .75rem; border: 1px solid var(--at-sb-line); border-radius: 10px; background: transparent; color: var(--at-sb-text); font: inherit; font-size: .9rem; }
.at-sb__menu, .at-sb__menu ul { list-style: none; margin: 0; padding: 0; }
.at-sb__menu a { display: block; padding: .5rem .7rem; border-radius: 10px; color: var(--at-sb-text) !important; font-size: .93rem; }
.at-sb__menu a:hover { background: var(--at-sb-hover); color: var(--at-sb-brand) !important; }
.at-sb__menu .sub-menu { padding-left: .8rem; border-left: 2px solid var(--at-sb-line); margin: 0 0 .2rem .8rem; }
.at-sb__menu .sub-menu a { font-size: .88rem; padding: .38rem .6rem; }
.at-sb__menu > li > a[href="#"] { color: var(--at-sb-muted) !important; font-weight: 600; cursor: default; }
/* Di PC/tablet menu tema sudah ada di header, jadi bagian ini khusus panel HP */
@media (min-width: 768px) { .at-sb .at-sb__more { display: none !important; } }
.at-sb__menu .rt-menu-arrow, .at-sb__menu .sub-menu-toggle { display: none !important; }

/* Panel HP: dibuka lewat tombol garis tiga tema */
@media (max-width: 767px) {
    html.at-sbd-open .at-sb {
        display: flex; position: fixed; z-index: 100001; top: 0; left: 0; bottom: 0; width: min(300px, 86vw);
        flex-direction: column; gap: .35rem; padding: 3rem .75rem 1rem; overflow-y: auto;
        background: var(--at-sb-bg); box-shadow: 8px 0 30px rgba(10, 25, 50, .25); font-size: 15px; line-height: 1.3;
        animation: at-sb-in .22s ease;
    }
    html.at-sbd-open .at-sb-back { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(8, 20, 40, .45); animation: at-sb-fade .2s ease; }
    html.at-sbd-open .at-sb__close { display: inline-flex; position: absolute; top: .55rem; right: .55rem; padding: .4rem; border: 0; border-radius: 10px; background: none; color: var(--at-sb-muted); cursor: pointer; }
    html.at-sbd-open .at-sb__ctrl { display: none; }
    .at-sb a { text-decoration: none !important; }
    .at-sb__ic { flex: 0 0 22px; width: 22px; height: 22px; }
    .at-sb__top { display: grid; gap: .5rem; padding-bottom: .65rem; border-bottom: 1px solid var(--at-sb-line); }
    .at-sb__user { display: flex; align-items: center; gap: .65rem; padding: .3rem .35rem; color: var(--at-sb-text) !important; }
    .at-sb .at-avatar { flex: 0 0 36px; width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--at-sb-grad); color: #fff; font-weight: 700; }
    .at-sb__who, .at-sb__tag { display: grid; min-width: 0; margin: 0; color: var(--at-sb-text); }
    .at-sb__who small, .at-sb__tag small { color: var(--at-sb-muted); font-size: .78rem; }
    .at-sb__balance { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 12px; color: #fff !important; font-weight: 700; background: var(--at-sb-grad); }
    .at-sb__nav { display: grid; gap: 2px; }
    .at-sb__link { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border-radius: 12px; color: var(--at-sb-text) !important; font-weight: 500; }
    .at-sb__link.is-active { background: color-mix(in srgb, var(--at-sb-brand) 11%, transparent); color: var(--at-sb-brand) !important; font-weight: 700; }
    .at-sb__sep { border: 0; border-top: 1px solid var(--at-sb-line); margin: .4rem .3rem; }
    .at-sb__cta { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; padding: .75rem; border-radius: 12px; color: #fff !important; font-weight: 700; background: var(--at-sb-grad); }
}
@keyframes at-sb-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes at-sb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.at-sbd-open .at-sb, html.at-sbd-open .at-sb-back { animation: none; } }