:root{
      --bg:#f5f7fb; --panel:#ffffff; --accent:#2563eb; --muted:#6b7280; --danger:#ef4444;
      --radius:12px; --shadow: 0 6px 18px rgba(20,30,60,0.08);
      font-family: 'Vazirmatn', Tahoma, sans-serif; --transition:200ms ease;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:#0b1420}

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

    /* SIDEBAR */
    .sidebar{width:270px;background:#0f1724;color:#fff;display:flex;flex-direction:column;transition:width 220ms ease,transform 220ms ease}
    .sidebar.collapsed{width:70px}
    .sidebar.hidden{transform:translateX(110%)}
    .sidebar .sidebar-header{padding:14px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between}
    .logo{font-weight:700;font-size:18px}

    .nav{padding:8px;overflow:auto}
    .nav-item{margin-bottom:6px}
    .nav-link{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:#cbd5e1;cursor:pointer;transition:background 160ms}
    .nav-link:hover{background:rgba(255,255,255,0.03);color:#fff}
    .nav-link.active{background:linear-gradient(90deg,#1e293b,#0ea5a4);color:#fff}

    /* icon font usage */
    .icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
    .title{white-space:nowrap}

    /* submenu */
    .submenu{overflow:hidden;max-height:0;transition:max-height 220ms ease;padding-right:14px}
    .nav-item.open>.submenu{max-height:400px}
    .submenu a{display:block;padding:8px 12px;border-radius:8px;color:#cbd5e1;margin:6px 0}
    .sidebar.collapsed .title{display:none}
    .sidebar.collapsed .submenu{display:none}

    /* MAIN */
    .main{flex:1;display:flex;flex-direction:column;transition:margin 220ms ease}
    .sidebar.hidden + .main {width: 100%;margin-right: 0;}
    .topbar{background:var(--panel);padding:10px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;justify-content:space-between}
    .topbar-left{display:flex;align-items:center;gap:10px}
    .btn-ghost{background:none;border:none;padding:8px;border-radius:8px;cursor:pointer}
    .search-box{min-width:280px;flex:1}
    .search-box input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid #e6eef7}
    .breadcrumb{font-size:14px;color:var(--muted)}
    .welcome{font-size:14px}

    .content{flex:1;padding:18px;overflow:auto}
    .panel{background:var(--panel);border-radius:12px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px}

    /* grid */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .col-8{grid-column:span 8}
    .col-4{grid-column:span 4}
    .col-6{grid-column:span 6}

    /* table */
    table{width:100%;border-collapse:collapse}
    thead th{background:#f1f5f9;text-align:right;padding:10px;border-bottom:1px solid #eef2f7;cursor:pointer}
    tbody td{padding:12px;border-bottom:1px solid #f3f6fb}
    .tag{display:inline-block;padding:6px 8px;border-radius:999px;background:#eef2ff;font-size:12px}

    /* responsive */
    @media (max-width:900px){.sidebar{display:none}.app{flex-direction:column}.content{padding:12px}.grid{grid-template-columns:repeat(6,1fr)}.col-8{grid-column:span 6}.col-4{grid-column:span 6}}

    /* subtle animations */
    .fade-in{animation:fadeIn 240ms ease}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

    /* helper small text */
    .small{font-size:13px;color:var(--muted)}
    

    
    /*sidbar styles*/
    
    /* اضافه کردن استایل برای حالت‌های مختلف سایدبار */
    .sidebar.hidden + .main {
      width: 100%;
      margin-right: 0;
    }
    
    /* استایل برای آیکن‌های مختلف دکمه تغییر وضعیت */
    .bx-sidebar-expand:before {
      content: "\e98d";
      font-family: boxicons !important;
    }
    
    .bx-sidebar-collapse:before {
      content: "\ee6b";
      font-family: boxicons !important;
    }
    
    .bx-sidebar-hide:before {
      content: "\e8f0";
    }

/* end sidebar styles*/