:root{
    --rp-primary: #6c6ff5;
    --rp-primary-deep: #5b5eea;

    --rp-shadow-soft: 0 10px 24px rgba(25, 35, 60, .08);
    --rp-shadow-mini: 0 6px 16px rgba(25, 35, 60, .10);

    --rp-soft-bg: rgba(108,111,245,.08);
    --rp-soft-panel: rgba(108,111,245,.06);
}

/* =========================================
   BASE (fallback เฉพาะ active bar/สี)
========================================= */
#side-menu>li.mm-active>a,
#side-menu>li>a.mm-active{
    background: rgba(108, 111, 245, .10);
    color: var(--rp-primary);
}

#side-menu>li.mm-active>a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: var(--rp-primary);
}

/* =========================================
   RPHIC FINAL (Compact + Theme Color)
========================================= */

/* Sidebar */
.vertical-menu{
    box-shadow: var(--rp-shadow-soft) !important;
    border-right: 1px solid rgba(0,0,0,.06) !important;
    background: linear-gradient(180deg,#f7f8ff 0%, #f3f4ff 100%) !important;
}

/* -------------------------
   MAIN MENU – Spacing (ปรับเพิ่ม)
------------------------- */
#sidebar-menu #side-menu > li{
    margin: 8px 14px !important;   /* ✅ เดิม 3px 10px */
}

#sidebar-menu #side-menu > li > a{
    display: grid !important;
    grid-template-columns: 36px 1fr 20px !important;
    align-items: center !important;
    column-gap: 12px !important;

    padding: .48rem .70rem !important;
    border-radius: 13px !important;
    position: relative !important;

    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

/* icon box – tone (ใช้ค่าที่คุณต้องการจริง ๆ) */
#sidebar-menu #side-menu > li > a > i{
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;

    padding: 0 !important;
    margin: 0 !important;
    border-radius: 11px !important;

    background: rgba(108,111,245,.08) !important; /* ✅ เดิมเทา -> ม่วงอ่อน */
}

/* arrow */
#sidebar-menu #side-menu > li > a.has-arrow:after{
    right: 14px !important;
}

/* hover */
#sidebar-menu #side-menu > li > a:hover{
    background: var(--rp-soft-bg) !important;
    color: var(--rp-primary) !important;
    box-shadow: 0 3px 8px rgba(108,111,245,.10) !important;
}
#sidebar-menu #side-menu > li > a:hover > i{
    background: rgba(108,111,245,.12) !important;
    color: var(--rp-primary) !important;
}

/* active main */
#sidebar-menu #side-menu > li.mm-active > a,
#sidebar-menu #side-menu > li > a.mm-active{
    background: linear-gradient(135deg,#6c6ff5,#8a5cf6) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(108,111,245,.25) !important;
}

#sidebar-menu #side-menu > li.mm-active > a > i,
#sidebar-menu #side-menu > li > a.mm-active > i{
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

/* active bar */
#sidebar-menu #side-menu > li.mm-active > a::before{
    left: -10px !important;
    width: 4px !important;
    top: 9px !important;
    bottom: 9px !important;
    background: #fff !important;
}

/* -------------------------
   SUB MENU – inset panel (ปรับให้เนียน + ไม่ซ้ำซ้อน)
------------------------- */
#sidebar-menu ul li ul.sub-menu{
    margin: 8px 0 10px 0 !important;           /* ✅ เพิ่ม breathing space */
    padding: 8px 8px 8px 46px !important;      /* ✅ แน่นขึ้นนิด/ดูพรีเมียม */
    border-radius: 13px !important;

    position: relative !important;
    background: rgba(108,111,245,.07) !important;   /* ✅ ใช้ PATCH ของคุณ */
    border: 1px solid rgba(108,111,245,.13) !important;
}

/* guide line */
#sidebar-menu ul li ul.sub-menu::before{
    content: "" !important;
    position: absolute !important;
    left: 26px !important;
    top: 9px !important;
    bottom: 9px !important;
    width: 2px !important;
    border-radius: 2px !important;
    background: rgba(25,35,60,.10) !important;
}

/* sub item */
#sidebar-menu ul li ul.sub-menu li a{
    padding: .40rem .60rem .40rem 26px !important;
    font-size: 12.8px !important;
    border-radius: 10px !important;

    background: transparent !important;
    color: #74788d !important;

    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* dot */
#sidebar-menu ul li ul.sub-menu li a:before{
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;

    background: #fff !important;
    border: 2px solid #74788d !important;

    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* hover sub */
#sidebar-menu ul li ul.sub-menu li a:hover{
    background: rgba(108,111,245,.10) !important;
    color: var(--rp-primary) !important;
}

/* active sub */
#sidebar-menu ul li ul.sub-menu li.mm-active > a,
#sidebar-menu ul li ul.sub-menu li a.mm-active{
    background: #fff !important;
    color: var(--rp-primary-deep) !important;
    box-shadow: 0 4px 12px rgba(108,111,245,.18) !important;
}
#sidebar-menu ul li ul.sub-menu li.mm-active > a:before,
#sidebar-menu ul li ul.sub-menu li a.mm-active:before{
    background: var(--rp-primary) !important;
    border-color: var(--rp-primary) !important;
}

/* -------------------------
   Mobile tune (คงเดิม แต่ปรับ margin ให้เข้าชุด)
------------------------- */
@media (max-width: 991.98px){
    #sidebar-menu #side-menu > li{ margin: 6px 10px !important; }  /* ✅ จาก 3px 8px */
    #sidebar-menu #side-menu > li > a{ padding: .46rem .66rem !important; }
    #sidebar-menu ul li ul.sub-menu{ padding-left: 44px !important; }
}

/* arrow size */
#sidebar-menu .has-arrow:after{
    font-size: 0.80rem !important;
    align-self: center;
}

/* =========================================
   RPHIC Logo Section
========================================= */
.rphic-logo-wrap{
    padding: 20px 10px;
    background: linear-gradient(180deg,#f6f7ff 0%, #eef0ff 100%);
    border-bottom: 1px solid rgba(108,111,245,.12);
}

.rphic-logo-wrap img{
    background: #ffffff;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(108,111,245,.15);
    transition: transform .2s ease;
}

.rphic-logo-wrap img:hover{
    transform: translateY(-2px);
}