/* ==========================================================
   SISTEM EVENT V8.10
   CLEAN SIDEBAR + MOBILE BOTTOM NAV
   sidebar.css is the single source of truth for admin sidebar.
   ========================================================== */

:root{
    --lc-primary:var(--primary,#1f4c8f);
    --lc-primary-soft:var(--primary-soft,#eef5ff);
    --lc-accent:var(--accent,#f59931);
    --lc-sidebar-width:var(--sidebar-width,268px);
    --lc-sidebar-collapsed-width:88px;
    --lc-mobile-nav-height:72px;
}

/* ------------------------------
   DESKTOP SIDEBAR SHELL
   ------------------------------ */
.lc-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:120;
    width:var(--lc-sidebar-width);
    height:100dvh;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:12px;
    overflow:hidden;
    color:rgba(255,255,255,.94);
    background:
        radial-gradient(circle at 18% 4%,rgba(255,255,255,.16),transparent 13rem),
        radial-gradient(circle at 92% 18%,rgba(245,153,49,.14),transparent 15rem),
        linear-gradient(
            165deg,
            var(--sidebar-start,#1f4c8f) 0%,
            color-mix(in srgb,var(--sidebar-start,#1f4c8f) 62%,var(--sidebar-end,#102a55)) 52%,
            var(--sidebar-end,#102a55) 100%
        );
    border:0;
    box-shadow:14px 0 42px rgba(20,54,105,.18);
    transform:translateX(0);
    transition:
        width .24s cubic-bezier(.2,.75,.25,1),
        transform .24s cubic-bezier(.2,.75,.25,1),
        padding .24s ease;
}

.lc-sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(255,255,255,.07),transparent 28%),
        radial-gradient(circle at 7% 100%,rgba(255,255,255,.06),transparent 15rem);
}

.lc-sidebar > *{
    position:relative;
    z-index:1;
}

.lc-sidebar ~ .admin-content-shell{
    min-height:100vh;
    margin-left:var(--lc-sidebar-width);
    transition:margin-left .24s cubic-bezier(.2,.75,.25,1);
}

/* ------------------------------
   SIDEBAR HEADER
   ------------------------------ */
.lc-sidebar-brand{
    position:relative;
    flex:0 0 auto;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 5px 12px;
    border-bottom:1px solid rgba(255,255,255,.13);
}

.lc-sidebar-brand .sidebar-brand{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
}

.lc-sidebar .lc-brand-mark{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:13px;
    color:var(--lc-primary);
    background:rgba(255,255,255,.97);
    box-shadow:0 9px 22px rgba(0,0,0,.13);
}

.lc-sidebar .lc-brand-mark i{
    font-size:1rem;
}

.lc-sidebar .lc-brand-logo{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    padding:3px;
    border-radius:11px;
}

.lc-brand-text{
    min-width:0;
    display:grid;
    gap:2px;
    line-height:1.12;
}

.lc-brand-text > strong{
    display:block;
    max-width:150px;
    overflow:hidden;
    color:#fff;
    font-size:.88rem;
    font-weight:900;
    letter-spacing:-.02em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lc-brand-text > span{
    display:block;
    max-width:150px;
    overflow:hidden;
    color:rgba(238,245,255,.70);
    font-size:.68rem;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lc-sidebar-collapse{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:11px;
    color:rgba(255,255,255,.9);
    background:rgba(255,255,255,.10);
    box-shadow:none;
    cursor:pointer;
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.lc-sidebar-collapse:hover{
    color:#fff;
    background:rgba(255,255,255,.17);
}

.lc-sidebar-collapse:active{
    transform:scale(.94);
}

.lc-sidebar-collapse i{
    font-size:.76rem;
    transition:transform .2s ease;
}

/* ------------------------------
   NAVIGATION
   ------------------------------ */
.lc-nav{
    flex:1 1 auto;
    min-height:0;
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px 1px 10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
}

.lc-nav::-webkit-scrollbar{
    width:5px;
}

.lc-nav::-webkit-scrollbar-track{
    background:transparent;
}

.lc-nav::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(255,255,255,.20);
}

.lc-nav-group + .lc-nav-group{
    margin-top:15px;
}

.lc-nav-label{
    padding:0 9px 6px;
    color:rgba(238,245,255,.52);
    font-size:.60rem;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.lc-nav-link{
    position:relative;
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    margin:2px 0;
    padding:9px 10px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:13px;
    color:rgba(255,255,255,.78);
    background:transparent;
    font-size:.80rem;
    font-weight:800;
    line-height:1.15;
    text-decoration:none;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.lc-nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.07);
    transform:translateX(2px);
}

.lc-nav-link.active{
    color:#fff;
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.08);
    box-shadow:inset 3px 0 0 var(--lc-accent);
}

.lc-nav-link > i:first-child{
    width:22px;
    flex:0 0 22px;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.83);
    font-size:.94rem;
    text-align:center;
}

.lc-nav-link.active > i:first-child{
    color:#fff;
}

.lc-nav-link .nav-label{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lc-nav-link .external-icon{
    width:17px;
    height:17px;
    flex:0 0 17px;
    display:grid;
    place-items:center;
    margin-left:auto;
    color:rgba(255,255,255,.48);
    font-size:.60rem;
}

.lc-nav-link .external-icon i{
    font-size:.60rem;
}

/* ------------------------------
   FOOTER / USER
   ------------------------------ */
.lc-sidebar-footer{
    flex:0 0 auto;
    margin-top:auto;
    padding:10px 1px 1px;
    border-top:1px solid rgba(255,255,255,.13);
}

.lc-sidebar-user{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:7px;
    padding:8px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    background:rgba(255,255,255,.07);
}

.lc-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:11px;
    color:var(--lc-primary);
    background:rgba(255,255,255,.96);
    font-size:.76rem;
    font-weight:950;
}

.lc-sidebar-user-text{
    min-width:0;
    display:grid;
    gap:2px;
    line-height:1.12;
}

.lc-sidebar-user-text > strong{
    max-width:150px;
    overflow:hidden;
    color:#fff;
    font-size:.75rem;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lc-sidebar-user-text > span{
    max-width:150px;
    overflow:hidden;
    color:rgba(238,245,255,.62);
    font-size:.62rem;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lc-logout-btn{
    min-height:40px;
    margin-top:0;
    color:rgba(255,255,255,.78);
    background:rgba(176,42,34,.13);
    border-color:rgba(255,255,255,.05);
}

.lc-logout-btn:hover{
    color:#fff;
    background:rgba(176,42,34,.23);
    border-color:rgba(255,255,255,.07);
    transform:none;
}

/* ------------------------------
   CLEAN COLLAPSED DESKTOP STATE
   ------------------------------ */
.lc-sidebar.is-collapsed{
    width:var(--lc-sidebar-collapsed-width);
    padding-inline:10px;
}

.lc-sidebar.is-collapsed ~ .admin-content-shell{
    margin-left:var(--lc-sidebar-collapsed-width);
}

.lc-sidebar.is-collapsed .lc-sidebar-brand{
    min-height:64px;
    gap:5px;
    padding-inline:0;
}

.lc-sidebar.is-collapsed .sidebar-brand{
    flex:0 0 40px;
    width:40px;
}

.lc-sidebar.is-collapsed .lc-brand-text,
.lc-sidebar.is-collapsed .lc-nav-label,
.lc-sidebar.is-collapsed .lc-nav-link .nav-label,
.lc-sidebar.is-collapsed .lc-nav-link .external-icon,
.lc-sidebar.is-collapsed .lc-sidebar-user-text{
    display:none;
}

.lc-sidebar.is-collapsed .lc-sidebar-collapse{
    width:26px;
    height:26px;
    flex-basis:26px;
    border-radius:9px;
}

.lc-sidebar.is-collapsed .lc-sidebar-collapse i{
    transform:rotate(180deg);
}

.lc-sidebar.is-collapsed .lc-nav{
    padding-inline:0;
}

.lc-sidebar.is-collapsed .lc-nav-group + .lc-nav-group{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.10);
}

.lc-sidebar.is-collapsed .lc-nav-link{
    width:48px;
    min-height:46px;
    justify-content:center;
    gap:0;
    margin:3px auto;
    padding:0;
    border-radius:13px;
}

.lc-sidebar.is-collapsed .lc-nav-link:hover{
    transform:none;
}

.lc-sidebar.is-collapsed .lc-nav-link.active{
    box-shadow:inset 0 3px 0 var(--lc-accent);
}

.lc-sidebar.is-collapsed .lc-nav-link > i:first-child{
    width:auto;
    flex-basis:auto;
    font-size:1rem;
}

.lc-sidebar.is-collapsed .lc-sidebar-user{
    width:48px;
    justify-content:center;
    margin:0 auto 7px;
    padding:7px;
}

.lc-sidebar.is-collapsed .lc-avatar{
    width:32px;
    height:32px;
    flex-basis:32px;
}

.lc-sidebar.is-collapsed .lc-logout-btn{
    width:48px;
    justify-content:center;
    margin-inline:auto;
}

/* ------------------------------
   MOBILE TOPBAR + DRAWER
   ------------------------------ */
.lc-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:111;
    display:none;
    background:rgba(15,23,42,.50);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

.lc-mobile-bottom-nav{
    display:none;
}

.lc-mobile-nav-item{
    border:0;
    background:transparent;
    text-decoration:none;
}

@media(max-width:991.98px){
    :root{
        --lc-mobile-nav-height:72px;
    }

    body.lc-sidebar-open,
    body.sidebar-open{
        overflow:hidden;
        touch-action:none;
    }

    .lc-sidebar,
    .lc-sidebar.is-collapsed{
        width:min(86vw,320px);
        max-width:320px;
        height:100dvh;
        padding:12px;
        border-radius:0 22px 22px 0;
        box-shadow:22px 0 55px rgba(15,23,42,.25);
        transform:translateX(-106%);
        transition:transform .22s cubic-bezier(.2,.75,.25,1);
    }

    .lc-sidebar::before{
        border-radius:0 22px 22px 0;
    }

    .lc-sidebar.is-open,
    .lc-sidebar.open,
    body.lc-sidebar-open .lc-sidebar{
        transform:translateX(0);
    }

    .lc-sidebar ~ .admin-content-shell,
    .lc-sidebar.is-collapsed ~ .admin-content-shell{
        margin-left:0;
        padding-top:var(--mobile-topbar-height);
    }

    .lc-sidebar.is-collapsed .lc-sidebar-brand{
        min-height:64px;
        gap:9px;
        padding:6px 5px 12px;
    }

    .lc-sidebar.is-collapsed .sidebar-brand{
        flex:1 1 auto;
        width:auto;
    }

    .lc-sidebar.is-collapsed .lc-brand-text,
    .lc-sidebar.is-collapsed .lc-nav-label,
    .lc-sidebar.is-collapsed .lc-nav-link .nav-label,
    .lc-sidebar.is-collapsed .lc-nav-link .external-icon,
    .lc-sidebar.is-collapsed .lc-sidebar-user-text{
        display:grid;
    }

    .lc-sidebar.is-collapsed .lc-nav-link .external-icon{
        display:grid;
    }

    .lc-sidebar.is-collapsed .lc-nav-group + .lc-nav-group{
        margin-top:15px;
        padding-top:0;
        border-top:0;
    }

    .lc-sidebar.is-collapsed .lc-nav-link{
        width:100%;
        min-height:46px;
        justify-content:flex-start;
        gap:10px;
        margin:2px 0;
        padding:9px 10px;
        border-radius:13px;
    }

    .lc-sidebar.is-collapsed .lc-nav-link.active{
        box-shadow:inset 3px 0 0 var(--lc-accent);
    }

    .lc-sidebar.is-collapsed .lc-nav-link > i:first-child{
        width:22px;
        flex-basis:22px;
    }

    .lc-sidebar.is-collapsed .lc-sidebar-user{
        width:auto;
        justify-content:flex-start;
        margin:0 0 7px;
        padding:8px;
    }

    .lc-sidebar.is-collapsed .lc-logout-btn{
        width:100%;
        justify-content:flex-start;
        margin-inline:0;
    }

    .lc-sidebar-collapse{
        width:32px!important;
        height:32px!important;
        flex-basis:32px!important;
    }

    .lc-sidebar-collapse i{
        transform:none!important;
    }

    .lc-sidebar-collapse i::before{
        content:"\f00d";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
    }

    .lc-sidebar-backdrop.is-visible,
    .lc-sidebar-backdrop.show,
    body.lc-sidebar-open .lc-sidebar-backdrop{
        display:block;
    }

    /* Bottom navigation */
    .lc-mobile-bottom-nav{
        position:fixed;
        left:9px;
        right:9px;
        bottom:calc(7px + env(safe-area-inset-bottom,0px));
        z-index:104;
        min-height:68px;
        display:grid;
        grid-template-columns:repeat(var(--lc-mobile-nav-count,5),minmax(0,1fr));
        gap:3px;
        padding:6px;
        border:1px solid rgba(31,76,143,.12);
        border-radius:22px;
        background:color-mix(in srgb,var(--surface,#fff) 95%,transparent);
        box-shadow:0 16px 38px rgba(31,76,143,.16);
        backdrop-filter:blur(18px) saturate(1.1);
        -webkit-backdrop-filter:blur(18px) saturate(1.1);
    }

    .lc-mobile-nav-item{
        position:relative;
        min-width:0;
        min-height:54px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:3px;
        padding:5px 2px;
        border-radius:16px;
        color:#68788e;
        font-family:inherit;
        font-weight:850;
        line-height:1;
        text-decoration:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        transition:
            color .16s ease,
            background .16s ease,
            transform .14s ease;
    }

    .lc-mobile-nav-icon{
        width:28px;
        height:26px;
        display:grid;
        place-items:center;
        flex:0 0 26px;
        border-radius:10px;
        font-size:.98rem;
    }

    .lc-mobile-nav-label{
        width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:.56rem;
        font-weight:900;
        text-align:center;
    }

    .lc-mobile-nav-item.active{
        color:var(--lc-primary);
        background:var(--lc-primary-soft);
    }

    .lc-mobile-nav-item.active::before{
        content:"";
        position:absolute;
        top:3px;
        left:50%;
        width:18px;
        height:3px;
        border-radius:999px;
        background:var(--lc-primary);
        transform:translateX(-50%);
    }

    .lc-mobile-nav-item:active{
        transform:scale(.96);
    }

    .lc-mobile-menu-trigger{
        color:#fff;
        background:linear-gradient(135deg,var(--lc-accent),#d87912);
        box-shadow:0 8px 18px rgba(245,153,49,.20);
    }

    .lc-mobile-menu-trigger:hover,
    .lc-mobile-menu-trigger.menu-open{
        color:#fff;
        background:linear-gradient(135deg,#d87912,var(--lc-accent));
    }

    .mobile-nav-full .lc-mobile-bottom-nav{
        left:0;
        right:0;
        bottom:0;
        min-height:calc(var(--lc-mobile-nav-height) + env(safe-area-inset-bottom,0px));
        padding:7px 8px max(7px,env(safe-area-inset-bottom,7px));
        border-right:0;
        border-bottom:0;
        border-left:0;
        border-radius:22px 22px 0 0;
    }

    .app-main{
        padding-bottom:calc(var(--lc-mobile-nav-height) + 34px + env(safe-area-inset-bottom,0px))!important;
    }

    .save-event,
    .submit-registration{
        bottom:calc(var(--lc-mobile-nav-height) + 20px + env(safe-area-inset-bottom,0px))!important;
    }
}

@media(max-width:575.98px){
    :root{
        --lc-mobile-nav-height:70px;
    }

    .lc-sidebar,
    .lc-sidebar.is-collapsed{
        width:min(88vw,310px);
        max-width:310px;
        border-radius:0 20px 20px 0;
    }

    .lc-mobile-bottom-nav{
        left:6px;
        right:6px;
        bottom:calc(5px + env(safe-area-inset-bottom,0px));
        gap:2px;
        padding:5px;
        border-radius:20px;
    }

    .lc-mobile-nav-item{
        min-height:52px;
        border-radius:14px;
    }

    .lc-mobile-nav-label{
        font-size:.53rem;
    }
}

@media(min-width:992px){
    .lc-mobile-bottom-nav{
        display:none!important;
    }

    .lc-sidebar-backdrop{
        display:none!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .lc-sidebar,
    .lc-sidebar ~ .admin-content-shell,
    .lc-nav-link,
    .lc-sidebar-collapse,
    .lc-mobile-nav-item{
        transition:none!important;
    }
}

/* V8.13 security: logout is now POST + CSRF protected. */
.sidebar-logout-form{width:100%;margin:0;padding:0}.sidebar-logout-form .lc-logout-btn{width:100%;cursor:pointer;font-family:inherit}.lc-sidebar.is-collapsed .sidebar-logout-form{display:grid;place-items:center}.lc-sidebar.is-collapsed .sidebar-logout-form .lc-logout-btn{width:48px}