/* 2.9.27 - Critical public mobile drawer overlay fix.
   The drawer is forced to become a true viewport layer, so cards/hero/header/theme
   elements cannot cover the menu after it is opened. */
.sps-public-drawer-backdrop{display:none!important}
@media(max-width:899px){
    html.sps-lock-scroll,
    body.sps-lock-scroll,
    body.sps-menu-open,
    body.sps-public-menu-active{overflow:hidden!important;max-height:100dvh!important}
    body.sps-public-menu-active{touch-action:none!important}
    .sps-public-drawer-backdrop{
        position:fixed!important;
        inset:0!important;
        z-index:2147483000!important;
        display:block!important;
        width:100vw!important;
        height:100dvh!important;
        background:rgba(11,23,36,.46)!important;
        backdrop-filter:blur(2px)!important;
        -webkit-backdrop-filter:blur(2px)!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transition:opacity .18s ease,visibility .18s ease!important;
    }
    .sps-public-drawer-backdrop.is-open{
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer],
    body > .sps-public-drawer.sps-mobile-drawer[data-sps-public-drawer],
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer],
    [data-sps-public-nav-root] .sps-mobile-drawer[data-sps-public-drawer]:not(.sps-sidebar):not(.sps-admin-sidebar){
        display:block!important;
        position:fixed!important;
        inset:0!important;
        top:0!important;
        right:0!important;
        bottom:0!important;
        left:0!important;
        z-index:2147483010!important;
        width:100vw!important;
        min-width:100vw!important;
        max-width:100vw!important;
        height:100dvh!important;
        min-height:100dvh!important;
        max-height:100dvh!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        background:#fff!important;
        color:#0b1724!important;
        box-shadow:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        transform:translate3d(100%,0,0)!important;
        visibility:hidden!important;
        opacity:1!important;
        pointer-events:none!important;
        transition:transform .22s ease,visibility .22s ease!important;
        contain:layout paint!important;
    }
    body.sps-public-menu-active > .sps-public-drawer--portal[data-sps-public-drawer].is-open,
    body.sps-menu-open > .sps-public-drawer--portal[data-sps-public-drawer].is-open,
    [data-sps-public-nav-root].sps-public-menu-open .sps-public-drawer[data-sps-public-drawer],
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer].is-open,
    [data-sps-public-nav-root].sps-public-menu-open .sps-mobile-drawer[data-sps-public-drawer]:not(.sps-sidebar):not(.sps-admin-sidebar),
    [data-sps-public-nav-root] .sps-mobile-drawer[data-sps-public-drawer]:not(.sps-sidebar):not(.sps-admin-sidebar).is-open{
        transform:translate3d(0,0,0)!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-mobile-drawer__header,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-mobile-drawer__header{
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:12px!important;
        position:sticky!important;
        top:0!important;
        z-index:2147483020!important;
        min-height:68px!important;
        margin:0!important;
        padding:12px 16px!important;
        border-bottom:1px solid rgba(208,213,221,.92)!important;
        background:#fff!important;
        box-shadow:0 1px 0 rgba(16,24,40,.04)!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-mobile-drawer__header strong,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-mobile-drawer__header strong{
        flex:1 1 auto!important;
        min-width:0!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
        color:#0b1724!important;
        font-size:15px!important;
        font-weight:800!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-public-close,
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-mobile-drawer__close,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-public-close,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-mobile-drawer__close{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:0 0 42px!important;
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
        margin:0!important;
        position:relative!important;
        top:auto!important;
        right:auto!important;
        z-index:2147483030!important;
        border:1px solid rgba(208,213,221,.96)!important;
        border-radius:14px!important;
        background:#fff!important;
        color:#0b1724!important;
        font-size:24px!important;
        line-height:1!important;
        cursor:pointer!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-mobile-drawer__nav,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-mobile-drawer__nav{
        position:relative!important;
        z-index:2147483015!important;
        display:grid!important;
        gap:10px!important;
        width:100%!important;
        padding:16px!important;
        background:#fff!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] .sps-mobile-drawer__item,
    body > .sps-public-drawer--portal[data-sps-public-drawer] a,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] .sps-mobile-drawer__item,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] a{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        width:100%!important;
        min-height:50px!important;
        border:1px solid rgba(208,213,221,.96)!important;
        border-radius:16px!important;
        background:#fff!important;
        color:#0b1724!important;
        padding:12px 14px!important;
        text-decoration:none!important;
        font-weight:750!important;
        box-shadow:none!important;
    }
    body > .sps-public-drawer--portal[data-sps-public-drawer] a.is-primary,
    [data-sps-public-nav-root] .sps-public-drawer[data-sps-public-drawer] a.is-primary{
        background:#073b2a!important;
        border-color:#073b2a!important;
        color:#fff!important;
    }
}
@media(min-width:900px){
    .sps-public-drawer-backdrop,
    body > .sps-public-drawer--portal[data-sps-public-drawer]{display:none!important}
}

/* 2.9.28 - Frontend archive mobile table must stay as a real scrollable table.
   This overrides earlier card-on-mobile rules so long metadata stays aligned and usable. */
@media (max-width:640px){
    .sps-portal-public-feed,
    .sps-html-page{
        overflow-x:hidden!important;
    }
    .sps-public-archive-shell{
        width:calc(100% - 18px)!important;
        max-width:none!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .sps-public-archive-table-wrap,
    .sps-table-wrap.sps-public-archive-table-wrap{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-inline:contain!important;
        border:1px solid var(--sps-border)!important;
        border-radius:18px!important;
        background:#fff!important;
        box-shadow:0 14px 32px rgba(16,24,40,.07)!important;
    }
    .sps-public-archive-table-wrap::after{
        content:"Geser tabel ke samping";
        position:sticky!important;
        left:0!important;
        bottom:0!important;
        display:block!important;
        padding:8px 12px!important;
        border-top:1px solid rgba(208,213,221,.85)!important;
        background:linear-gradient(90deg,#fff,rgba(255,255,255,.92))!important;
        color:#667085!important;
        font-size:11px!important;
        font-weight:750!important;
        letter-spacing:.02em!important;
    }
    .sps-public-archive-table,
    .sps-table.sps-public-archive-table{
        display:table!important;
        width:100%!important;
        min-width:940px!important;
        border-collapse:collapse!important;
        border-spacing:0!important;
        table-layout:auto!important;
        background:#fff!important;
    }
    .sps-public-archive-table thead{
        display:table-header-group!important;
    }
    .sps-public-archive-table tbody{
        display:table-row-group!important;
    }
    .sps-public-archive-table tr,
    .sps-public-archive-table tbody tr,
    .sps-public-archive-table .sps-public-archive-record{
        display:table-row!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        animation:none!important;
    }
    .sps-public-archive-table th,
    .sps-public-archive-table td{
        display:table-cell!important;
        padding:10px 11px!important;
        border-bottom:1px solid #eaecf0!important;
        background:#fff!important;
        vertical-align:top!important;
        text-align:left!important;
        white-space:normal!important;
    }
    .sps-public-archive-table th{
        position:sticky!important;
        top:0!important;
        z-index:3!important;
        background:#f8fafc!important;
        color:#344054!important;
        white-space:nowrap!important;
    }
    .sps-public-archive-table td::before,
    .sps-public-archive-table td:before{
        content:none!important;
        display:none!important;
    }
    .sps-public-archive-table td:nth-child(1),
    .sps-public-archive-table th:nth-child(1){
        width:56px!important;
        white-space:nowrap!important;
    }
    .sps-public-archive-table td:nth-child(3){
        min-width:220px!important;
    }
    .sps-public-archive-table td:nth-child(4){
        min-width:180px!important;
    }
    .sps-public-archive-table td:nth-child(7),
    .sps-public-archive-table td:nth-child(8){
        white-space:nowrap!important;
    }
    .sps-public-archive-button{
        width:auto!important;
        min-width:84px!important;
        min-height:36px!important;
        padding:7px 12px!important;
        white-space:nowrap!important;
    }
}
@media (max-width:420px){
    .sps-public-archive-table td{
        display:table-cell!important;
        grid-template-columns:none!important;
    }
}