:root{
    --rtih-purple:#530d70;
    --rtih-purple-dark:#3f0955;
    --rtih-blue:#0056d2;
    --rtih-blue-soft:#edf4ff;
    --rtih-bg:#f5f7fc;
    --rtih-surface:#ffffff;
    --rtih-border:#e7ebf3;
    --rtih-text:#1f2937;
    --rtih-muted:#6b7280;
    --shadow:0 8px 28px rgba(16,24,40,0.06);
    --radius:14px;
    --sidebar-width:260px;
    --topbar-height:76px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Inter, sans-serif;
    background:var(--rtih-bg);
    color:var(--rtih-text);
}

/* TOPBAR */

.topbar{
    height:var(--topbar-height);
    background:linear-gradient(90deg,var(--rtih-purple),var(--rtih-blue));
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

.logos{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-box{
    width:120px;
    height:42px;
    background:rgba(255,255,255,0.12);
    border:1px dashed rgba(255,255,255,0.35);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    border-radius:10px;
    backdrop-filter:blur(8px);
}

.title{
    font-size:18px;
    font-weight:700;
    color:#fff;
}

.user-greeting{
    padding:10px 16px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    box-shadow:0 8px 22px rgba(0,0,0,0.08);
    backdrop-filter:blur(10px);
}

/* LAYOUT */

.admin-shell{
    display:flex;
    min-height:100vh;
}

/* SIDEBAR */

.sidebar{
    position:fixed;
    top:var(--topbar-height);
    left:0;
    width:var(--sidebar-width);
    height:calc(100vh - var(--topbar-height));
    background:#fff;
    border-right:1px solid var(--rtih-border);
    overflow-y:auto;
    z-index:900;
    display:flex;
    flex-direction:column;
}

.sidebar-nav{
    padding:14px 0;
    flex:1;
}

.sidebar-nav a{
    display:block;
    padding:13px 22px;
    text-decoration:none;
    color:#4b5563;
    font-weight:500;
    border-left:4px solid transparent;
    transition:.2s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
    background:#f6f1fb;
    color:var(--rtih-purple);
    border-left-color:var(--rtih-purple);
}

/* sub - menu */
.sidebar{
    width:260px;
    min-height:0;
    background:#fff;
    border-right:1px solid #e5e5e5;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
}

.nav-link{
    display:block;
    padding:14px 22px;
    text-decoration:none;
    color:#1e2b4d;
    font-size:16px;
    transition:0.3s;
}

.nav-link:hover{
    background:#f5f3ff;
}

.nav-link.active{
    background:#f3e8ff;
    color:#6b21a8;
    font-weight:600;
}

.sidebar-footer{
    margin-top:auto;
    border-top:1px solid var(--rtih-border);
    padding:16px 18px 20px;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff 26%);
}

.signout-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:48px;
    padding:12px 18px !important;
    border:1px solid #fecaca;
    border-left:1px solid #fecaca !important;
    border-radius:12px;
    background:#fff5f5;
    color:#b91c1c !important;
    font-weight:700;
    box-shadow:0 10px 24px rgba(185,28,28,0.08);
}

.signout-link:hover{
    background:#fee2e2 !important;
    border-color:#fca5a5 !important;
    color:#991b1b !important;
    transform:translateY(-1px);
}

.menu-group{
    margin-top:5px;
}

.menu-title{
    padding:10px 22px;
    font-size:18px;
    font-weight:600;
    color:#111827;
}

.submenu{
    display:flex;
    flex-direction:column;
}

.submenu-link{
    padding-left:45px;
    font-size:15px;
}

/* MAIN */

.main-content{
    flex:1;
    margin-left:var(--sidebar-width);
    margin-top:var(--topbar-height);
    padding:28px;
}

/* footer */
.footer{
    width:100%;
    text-align:center;
    padding:15px 20px;
    background:#ffffff;
    border-top:1px solid #e5e7eb;
    color:#6b7280;
    font-size:14px;
}

/* RESPONSIVE */

@media (max-width: 900px){

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
        top:0;
    }

    .main-content{
        margin-left:0;
        margin-top:0;
    }

    .admin-shell{
        flex-direction:column;
    }

    .sidebar-footer{
        padding:12px 18px 16px;
    }
}